拖放一个 div 并放在一个动态创建的 div 上

Question

我想在按钮单击事件上使用 javascript 创建的动态创建的 div 上放置一个 div 这是我的代码

$("#add").click(function() {

   var d = document.createElement("div");

   d.className = "machine";

   document.getElementById("cloud").appendChild(d);

});

这是我要拖放到上面创建的 div 上的 div 这是我的可拖动代码

$("#Softwares-List div").draggable({

   helper:"clone"

});

<div id="Softwares-List">

      <div id="java">Java</div>

      <div id="ror">Ruby on Rails</div>

      <div id="dotnet">Visual Studio 10</div>

</div>

假设我想将 java 拖放到动态创建的 div 上，即 div.machine

我在动态创建的 div 上编写了这个可放置的代码 这是我的代码

$("div.machine").droppable({    

     accept: "#Softwares-List > div",

         activeClass: 'ui-state-hover',

         hoverClass: 'ui-state-active',

         drop: function(event, ui) {

             var dropElem = ui.draggable.html();

             clone = $('dropElem').clone(); 

         clone.id="newId";

         clone.css("position", "absolute");

         clone.css("top", ui.absolutePosition.top);

         clone.css("left", ui.absolutePosition.left);

             clone.draggable({ containment: 'parent' ,cursor: 'crosshair'});

             $(this).append(clone);

            alert("done dragging");

            },

});

但它不起作用，droppable 函数没有被调用。 请帮帮我 另外，如果在 droppable 中对我进行了任何更改，请告诉我。

Answer 1

在创建 div 之前，您是否致电 $("div.machine").droppable({？

只需将其移至#add click 事件处理程序的末尾即可。

Answer 2

你在什么浏览器中测试？

最后一个参数末尾的逗号会是某些版本的IE

            $(this).append(clone);

            alert("done dragging");

            },  <<----

});