Sortable 拖拽插件 使用文档

原创 2016年08月30日 16:06:02

插件网址: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

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery sortable 用法与参数说明

jquery ui sortable官方apihttp://api.jqueryui.com/sortable/举例: jQuery UI Sortable - Default functio...
  • lumengabc
  • lumengabc
  • 2013年12月09日 10:58
  • 4542

jquery sortable使用详解

这两天用到了jquery UI 中的 sortable 做 table 排序,遇到了一些问题,到网上查资料都是千篇一律的,中华文章一大抄啊!最后问题解决了,决定自己写一篇记录一下! 首先我们来看一...
  • BloodyMandoo
  • BloodyMandoo
  • 2017年09月06日 16:28
  • 501

jquery-sortable-api

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象...
  • wjc19911118
  • wjc19911118
  • 2012年10月16日 11:18
  • 8080

拖放排序插件Sortable.js

拖放排序插件Sortable.js javascript  html5   张淼 1月24日发布 赞  |   7 收藏  |  28 6.1k ...
  • p312011150
  • p312011150
  • 2017年10月26日 14:08
  • 657

Sortable 拖拽插件 使用文档

插件网址:http://www.runoob.com/jqueryui/api-sortable.html 此插件是让被选元素通过鼠标拖拽然后进行排序。 // 我排版渣— 注意事项: ...
  • u014665035
  • u014665035
  • 2016年08月30日 16:06
  • 2063

JQuery+UI+中文帮助文档

  • 2013年05月11日 19:35
  • 257KB
  • 下载

jq-ui的Sortable插件 两列布局 左右拖拽

html页面传送门—–http://pan.baidu.com/s/1c21Fqhi1.先引入
  • u014665035
  • u014665035
  • 2016年08月30日 16:25
  • 1495

【JQuery UI】拖曳排序插件——sortable

通过例子很好理解的一个插件。 拖曳排序插件的功能是将序列元素(例如、)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能。 它的调用格式为: $(selector).sortab...
  • happyhaojie
  • happyhaojie
  • 2016年04月07日 15:55
  • 319

Bootstrap Table API 中文版(完整翻译文档)

/* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能...
  • S_clifftop
  • S_clifftop
  • 2017年09月11日 20:20
  • 11863

JS组件系列——表格组件神器:bootstrap table

转载自:http://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没...
  • zh123456zh789
  • zh123456zh789
  • 2017年06月15日 16:47
  • 426
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Sortable 拖拽插件 使用文档
举报原因:
原因补充:

(最多只允许输入30个字)