Drag a Div and drop on a dynamically created div

Question

I want to drop a div on dynamically created div which is created using javascript on button click event here is my code

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

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

   d.className = "machine";

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

});

this is the div I want to drag and drop on above created div here is my draggable code

$("#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>

Suppose I want to drag java and drop on dyanmically created div i.e div.machine

I wrote this droppable code on dyanmically created div here is my code

$("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");

            },

});

But it's not working the droppable function is not getting call. plz help me also if there are any changes to me made in droppable then plz tell.

Answer 1

Are you calling $("div.machine").droppable({ before creating the div?

Just move it to the end of the #add click event handler.

Answer 2

What browser are you testing in?

The comma at the end of the last parameter will some versions of IE

            $(this).append(clone);

            alert("done dragging");

            },  <<----

});