[英]jQuery Drag and Drop with sortable UI not working
我目前正在尝试使用可排序的列表项创建拖放...但是当我将可拖动项移向占位符时,它只会返回到它的位置。 任何想法我做错了什么?
我在这里找到了这种方法,但它似乎对我不起作用。
这是我的 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
,而不是 at
droppable
。
您需要更改可排序事件的drop
事件, receive
也许或update
,取决于您的需要。
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();
});
请查看我所做的更改
$(function() {
$("#draggable li.to-drag").draggable({
appendTo: "body",
helper: "clone",
revert:"invalid"
});
$("#dropzone1").droppable({
drop:function( event, ui) {
alert(ui.draggable.text())
$("#dropzone").text( ui.draggable.text() ).appendTo( this );
}
});
$("ul, li").disableSelection();
});
额外的 div 确保您拖动到右侧面板
<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>
<div id="dropzone1" style="border:solid 1px">
<ul id="dropzone" class="items" >
<li class="placeholder"></li>
</ul>
</div>
需要一些调整以获得一些额外的功能,但你应该能够做到这一点
您将需要额外的代码来进行排序
在此处查看此链接 Cheers Truez
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.