jQuery-UI可拖动和可排序
所以我一直在使用这个例子: http : //jqueryui.com/demos/draggable/#sortable我已经在我的产品上完成了它。 但是我想做两个重大改变。
-
我不希望第二个列表(在我的示例中为toList)可以自行排序。 我只希望它接受第一个列表中的项目(在我的例子中是fromList)。
-
当用户从第一个列表(fromList)拖动项目并将其放入第二个列表(toList)时,我希望该项目被强制到底部。
建议? 这是我到目前为止所做的工作。 http://jsfiddle.net/CrtFD/
尝试使用droptable作为你的toList:
编辑:以下评论:
jQuery(document).ready(function(){ jQuery("#fromList li").draggable('destroy').draggable({ connectToSortable: "#toList", revert: "invalid", containment: '#equipCont', helper: function(e, ui) { return jQuery(this).clone().css('width', jQuery(this).width()); } }); jQuery("#toList").droppable('destroy').droppable({ drop: function(e, ui) { var dragClone = jQuery(ui.draggable).clone(); jQuery("#toList").append(dragClone); } }); jQuery("ul, li").disableSelection(); });
您希望您的toList是Droppable,而不是Sortable。 这个例子似乎描述了你想要实现的目标: http : //jqueryui.com/demos/droppable/#shopping-cart
- 设置可拖动对象的边界限制
- JQuery可轻松拖动
- jQuery UI,Draggable,Droppable,Auto Scroll
- replaceWith和jQuery draggable drop?
- 将对象拖到可排序列表中 – AngularJS
- 使用.droppable将jQuery UI删除到div中时删除元素
- 使用JQuery-Ui Droppable定位拖动,删除和追加的项目
- Jquery Draggable UI覆盖了draggable-enabled div中HTML元素的正常浏览器行为
- 当达到可放置限制时,jQuery UI draggable / sortable / droppable禁用drop