Question

我在表格中有一个可拖动的div（使用jqueryui插件）。我可以拖动一个div并将其保存在<td id=” middle-side”></td>中。现在我遇到了尝试创建其他div的问题，这些div也可以拖放并包含在<td id=” middle-side”></td>中。我用来附加这个新div的按钮不会对点击做出反应。我如何能够将新的可拖动div添加到<td id=” middle-side”></td>？ JSFIDDLE

HTML

<td class="middle-side">
                Keep me inside here!
                    <div class="draggable" class="ui-widget-content">
                        <p><b>Drag me around</b></p>
                    </div>

            </td>

Jquery的

//To Drag
$(function() {
     $( ".draggable" ).draggable({ containment: "parent" });
});


//To Add New Div
var i = 0;
var remove = true; // added this 
$('#button').click(function(e) {
    $('<div/>').attr({
        'id' : i
    }).addClass('draggale').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
    i++;
});

$('.middle-side').on('click','.draggable',function (){ // corrected spelling
    if(remove){
        $(this).remove();
    } else {
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});

Answer 1

您可以将div存储为.click函数中的模板：

$('#button').click(function(e) {
    $('<div class="draggable" class="ui-widget-content"><p><b>Drag me around</b></p></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
});

更新了小提琴：http://jsfiddle.net/0wbnud4k/3/

Answer 2

您的代码中有两个错误：

你拼错了draggable
您没有重新绑定所有.draggable div

这是新代码：

$('<div/>').attr({
        'id' : i
    }).addClass('draggable').css({ // Change CSS class
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
// Re-bind all your draggable divs
$( ".draggable" ).draggable({ containment: "parent" });

请参阅Fidddle：http://jsfiddle.net/thejsj/0wbnud4k/7/

Answer 3

试试这个：

$('#button').click(function(){
  $('.middle-side').append('<div class="draggable ui-widget-content"><p>text</p></div');
})

Answer 4

您在一个地方拼错了可拖动的内容，并且在添加更多内容后，您还必须重新初始化可拖动内容。

Fiddle

$(function() {
     $( ".draggable" ).draggable({ containment: "parent" });
});

var i = 0;
var remove = true; // added this 

$('#button').click(function(e) {
    $('<div/>').attr({
        'id' : i
    }).addClass('draggable').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
    i++;
    $( ".draggable" ).draggable({ containment: "parent" });
});

$('.middle-side').on('click','.draggable',function (){ // corrected spelling
    if(remove){
        $(this).remove();
    } else {
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});

Answer 5

首先，.addClass('draggale')中有拼写错误，应为.addClass('draggable')

其次，您还必须在新DIV上调用.draggable()以使其可拖动

这是更新的fiddle

通过单击按钮在元素内添加div

5 个答案: