I am still rather new to jQuery and had a question. I am trying to implement a "drag and drop" method where the user can drag items in one list and drop them in "buckets" in another. I seem to have the dragging part down but two things are causing me errors. First, I cant seem to remove the "clone" that gets dragged and second I cant remove the original item from the "Draggable" list. Bellow is my code (after it's been rendered in ASP.Net".
I am using the following jQuery Libraries:
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>
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 currently dragged element and its clone using the ui
object declared on your drop
method.