我对 jQuery 还很陌生,有一个问题。我正在尝试实现一种“拖放”方法,用户可以将一个列表中的项目拖动到另一个列表中的“存储桶”中。我似乎有拖累部分,但有两件事导致了我的错误。首先,我似乎无法删除被拖动的“克隆”,其次我无法从“可拖动”列表中删除原始项目。下面是我的代码(在 ASP.Net 中渲染后)。
我正在使用以下 jQuery 库:
- 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>
最佳答案
你能试试这个吗
$(".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
}
});
您可以使用 drop
方法中声明的 ui
对象来访问当前拖动的元素及其克隆。
关于jquery - 在 jQuery 的拖放中删除克隆并删除可拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16733241/