Removing clones and removing drag and drop in jQuery drag and drop

Question

I am still pretty new to jQuery and asked a question. I am trying to implement a “drag and drop” method where a user can drag and drop items into one list and transfer them to “buckets” in another. I seem to have a lugging part, but two things are causing me errors. Firstly, I cannot remove the “clone” that is being dragged, and secondly I cannot remove the original item from the “Draggable” list. Bellow is my code (after rendering it in ASP.Net).

I use the following jQuery libraries:

• 1.4.2 / jquery.js, jquery.ui.core.js
• jquery.ui.widget.js
• jquery.ui.mouse.js
• jquery.ui.draggable.js
• jquery.ui.droppable.js.

JScript:

$(function () { $(".draggable1").draggable({ helper:'clone', scroll: false, revert: "invalid", appendTo: '#PopupBody', drag: function(event,ui){ } }); $(".droppable1").droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function (event, ui) { var drag_id = $(ui.draggable).attr("id"); var targetElem = $(this).attr("id"); deleteMe = true; $(this) .addClass("ui-state-highlight") .find("p") .html("Dropped! inside " + targetElem); //destroy clone //remove from list } }); }); 

HTML:

 <table style="width:100%; height:100%; position:relative; border:1px solid blue;"> <tr> <td style="height:100%"> <div id="divWrapper" style="position:relative; border:1px solid green; overflow:auto; width:15em; height:80%;"> <table id="testDlg1_dlUsers" cellspacing="0" style="border-collapse:collapse;"> <tr> <td style="color:#8C4510;background-color:#FFF7E7;"> <div id="divWrapperItem" class="draggable1 ui-widget-content" style="border:1px solid black;"> <table> <tr> <td> <span id="testDlg1_dlUsers_DOBLabel_0">Hello</span> </td> </tr> </table> </div> </td> </tr> </table> </div> </td> <td style="height:100%"> <div style="position:relative; border:1px solid green; width:15em; height:80%;"> <table id="testDlg1_dlGroups" cellspacing="0" style="border-collapse:collapse;"> <tr> <td style="color:#8C4510;background-color:#FFF7E7;"> <div id="testDlg1_dlGroups_droppable1_0" class="droppable1 ui-widget-header" style="border:1px solid black; padding-left:20px;"> <table> <tr> <td> <span id="testDlg1_dlGroups_DOBLabel_0">Trash</span> </td> </tr> </table> </div> </td> </tr> </table> 

Answer 1

Can you try this

 $(".droppable1").droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function (event, ui) { var drag_id = $(ui.draggable).attr("id"); var targetElem = $(this).attr("id"); deleteMe = true; $(this) .addClass("ui-state-highlight") .find("p") .html("Dropped! inside " + targetElem); $(ui.helper).remove(); //destroy clone $(ui.draggable).remove(); //remove from list } }); 

You can access the current item being dragged and its clone using the ui object declared in your drop method.