Sortable 拖拽插件 使用文档

来源:互联网 发布:61398网络部队 编辑:程序博客网 时间:2024/06/03 14:51

插件网址:http://www.runoob.com/jqueryui/api-sortable.html
此插件是让被选元素通过鼠标拖拽然后进行排序。
// 我排版渣—
注意事项:
多列表链接时要使用connectWith,双向或者多向链接。
还要考虑下各向链接的方向,逻辑性(谁能拖拽过去,谁拖拽不过去)。
如果要拖拽多个元素,可以使用appendTo,把他追加到一块。

$(".connectedSortable").sortable({start: function (e, info) {      info.item.siblings(".selected").appendTo(info.item); },stop: function (e, info) {  //停止事件    info.item.after(info.item.find("li"));    $(".connectedSortable li").removeClass("selected");    $(".connectedSortable input").prop("checked",false);}});

如果要双向或者多向拖拽,用connectWith

$(".connectedSortable").sortable({    connectWith: "#item2"}, {containment: "#item2"}, {cursor: "move"}).disableSelection();

附:另外一些拖拽插件
1.Draggabilly 实现网页上各种元素的拖放操作。它支持IE8 +和多点触控
网址: http://www.jq22.com/jquery-info293

2.Gridly 网格式的拖放移位插件
网址:http://ksylvest.github.io/jquery-gridly

3.HTML5 Sortable 一个轻量级的拖拽插件,创建可拖拽的列表和网格元素
网址:http://www.chinaz.com/free/2012/0801/265549.shtml
或者https://github.com/farhadi/html5sortable

4.multisortable 多个对象拖拽
网址:http://jsfiddle.net/neochief/KWeMM/ http://jsfiddle.net/hQnWG/

5.dropzone.js 拖放文件上传 网址:http://www.jq22.com/jquery-info410

0 0
原创粉丝点击