使动态生成的 div 可放置答案

【问题标题】：Make a dynamically generated div droppable使动态生成的 div 可放置
【发布时间】：2014-04-24 10:11:45
【问题描述】：

我正在处理单元格内带有 div 的表格，并且我希望该 div 可以放置。当我将某些内容放入 div 时，它会在第一个 div 下生成一个新 div。但是动态生成的 div 必须是 droppable 的，现在它不是...

这里是一个div的创建：

// in a loop with i
divCreate = $("<div>", { id: "divCreate" + i, class: "droppable" });
$(divCreate).css("text-align", "center");
$(divCreate).css("width", "125px");
$(divCreate).css("height", "30px");

$(Cell).append($(divCreate));

JS 可放置：

$(".droppable").droppable( function() {
  // a lots of line with several function
})

所以我尝试将 $(divCreate).droppable(); 添加到 div 的创建中。现在 div 是可放置的，但不能使用我影响到“.droppable”类的 JS 函数。

我需要$(divCreate).live("droppable"); 吗？还是不可能，我需要将 JS 函数中的所有代码都放到 div 创建中？如果可能的话，我真的很想避免这种情况。

【问题讨论】：

标签： javascript jquery jquery-ui html droppable

【解决方案1】：

将droppable 代码移动到命名函数中：

function my_droppable() {
    // a lots of line with several function
}

并将您的常规绑定更改为：

$(".droppable").droppable(my_droppable);

那么你可以这样做：

divCreate.droppable(my_droppable);

在动态添加新元素之后。

【讨论】：

我认为它可以这样工作，但我怎样才能使用函数制作 drop 事件？ divCreate.droppable({drop: dropFunction()});
应该是{drop: dropFunction}

【解决方案2】：

尝试使用：

$(divCreate).appendTo($(Cell)).droppable();

【讨论】：

【解决方案3】：

Here is the sample我已经创建了。

$( "<div/>", {
  "class": "test",
    id:"myDiv",
  text: "Drag me!",
    width:"125",
    height:"30",
    'text-align':"center"
}).appendTo( "#droppable" );

$("#myDiv").css("text-align", "center");

$("#droppable" ).draggable();

【讨论】：