拖动Div并放下动态创建的div

时间:2012-06-08 07:02:20

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

我想在按钮点击事件上使用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并放弃dyanmically创建的div,即div.machine

我在dyanmically创建的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中做了任何更改,那么请告诉我。

2 个答案:

答案 0 :(得分:1)

您在创建div之前是否正在调用$("div.machine").droppable({

将它移动到#add click事件处理程序的末尾。

答案 1 :(得分:0)

您正在测试哪种浏览器?

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

            $(this).append(clone);

            alert("done dragging");

            },  <<----

});