我目前正在尝试创建一个带有可排序列表项的拖放...但是当我将可拖动项目移向占位符时，它只是返回到它的位置。你知道我做错了什么吗？
我找到了这个方法here ，但它似乎对我不起作用。
这是我的 HTML:
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<ul id="dropzone" class="items">
<li class="placeholder"></li>
</ul>
这是 jQuery:
$(function() {
$("#draggable li.to-drag").draggable({
connectWith: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").droppable({
drop: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});
感谢您的帮助! :)
编辑
这是正在运行的 jQuery:
$(function() {
$("#dropzone").sortable({
revert: true,
opacity: 0.5
});
$("#draggable li").draggable({
connectToSortable: ".items",
helper: "clone",
revert: true,
opacity: 0.5
});
$("li.placeholder").droppable({
revert: false,
drop: function (event, ui) {
var dragging = ui.draggable.clone();
$(this).append(dragging);
}
});
$("ul, li").disableSelection();
});
最佳答案
您至少遇到三个主要问题:
Draggable没有connectWith，它有connectToSortable。 所以你应该改变这一点。参见文档: http://api.jqueryui.com/draggable/要使用
connectToSortable，您需要一个sortable，而不是
可放置。您需要将
drop事件更改为可排序事件，receive
也许或更新，具体取决于您的需要。
http://api.jqueryui.com/sortable/
它可能看起来像这样:
$(function() {
$("#draggable li.to-drag").draggable({
connectToSortable: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").sortable({
receive: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});
关于javascript - 带有可排序 UI 的 jQuery 拖放不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30870738/