带有可排序UI的jQuery拖放不起作用
Posted
技术标签:
【中文标题】带有可排序UI的jQuery拖放不起作用【英文标题】:jQuery Drag and Drop with sortable UI not working 【发布时间】:2015-09-01 10:59:32 【问题描述】:我目前正在尝试使用可排序的列表项创建拖放...但是当我将可拖动的项目移向占位符时,它只是返回到它的位置。任何想法我做错了什么?
我找到了这个方法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();
);
【问题讨论】:
【参考方案1】:你至少有三个主要问题:
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();
);
【讨论】:
谢谢..在这里您提供了如此清晰的理解。【参考方案2】:请查看我所做的更改
$(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 干杯 真实的
【讨论】:
以上是关于带有可排序UI的jQuery拖放不起作用的主要内容,如果未能解决你的问题,请参考以下文章