我正在尝试使用可排序列表项创建拖放...但是当我将可拖动项目移向占位符时,它只会返回到它的位置。我有什么想法吗?
我找到了这种方法here,但它似乎对我不起作用。
这是我的HTML:
$(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();
});
感谢您的帮助! :)
修改
这是有效的jQuery:
Get-ChildItem
答案 0 :(得分:2)
你至少有三个主要问题:
Draggable
没有connectWith
,它有connectToSortable
。
所以你应该改变这个。见文档:
http://api.jqueryui.com/draggable/
要使用connectToSortable
,您需要sortable
,而不是<
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();
});
答案 1 :(得分:0)
请查看我所做的更改
$(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>
需要一些调整来获得一些额外的功能,但你应该能够做到这一点
您需要额外的代码才能进行排序
查看此链接here 干杯 Truez