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-api

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

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

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

html页面传送门—–http://pan.baidu.com/s/1c21Fqhi1.先引入 <link rel="stylesheet" href="http://apps.bdimg.c...

vue2.0使用Sortable.js实现的拖拽功能

简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组...

vuejs2.0使用Sortable.js实现的拖拽功能

简介 http://www.cnblogs.com/moqiutao/p/6423754.html在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的so...

使用angular-ui-sortable实现可拖拽排序列表

项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sort...

使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法

1.首先是实现拖动效果,代码如下 jQuery UI Sortable - Default functionality <link rel="stylesheet" href="//...

sortable 图片排序 ,拖拽

  • 2016-06-10 19:46
  • 33KB
  • 下载

Bootstrap框架使用拖拽插件Nestable

最近写个项目,前端页面需要使用拖拽功能,秉着不要重复造轮子的心态,在网上找到一个靠谱的插件Nestable,很好用。但在使用中依然发现了部分问题。最直观的一个就是当将一个dd-list中的所有dd-i...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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