HTML5技术

html5 Sortable.js 拖拽排序源码分析 - qq281113270(10)

字号+ 作者:H5之家 来源:H5之家 2016-11-04 15:00 我要评论( )

其他参数接口设置: group: Math.random(), //产生一个随机数 //产生一个随机数 //改参数是对象有三个两个参数 pull: 拉, put:放 默认都是是true pull还有一个值是: 'clone', pull: 拉, put:放 设置为false 就不能

其他参数接口设置:
            group: Math.random(),  //产生一个随机数 //产生一个随机数 //改参数是对象有三个两个参数   pull: 拉,     put:放   默认都是是true   pull还有一个值是: 'clone',   pull: 拉,     put:放 设置为false 就不能拖拽了, 如果 pull 这种为'clone'则可以重一个列表中拖拽到另一个列表并且克隆dom节点, name:是两个或者多个列表拖拽之间的通信,如果name相同则他们可以互相拖拽
            
            sort: true,  // 类型:Boolean,分类  false时候在自己的拖拽区域不能拖拽,但是可以拖拽到其他区域,true则可以做自己区域拖拽或者其他授权地方拖拽
            disabled: false,  //类型:Boolean 是否禁用拖拽 true 则不能拖拽 默认是true
            store: null,  // 用来html5 存储的 改返回 拖拽的节点的唯一id
            handle: null, //handle 这个参数是设置该标签,或者该class可以拖拽  但是不要设置 id的节点和子节点相同的tag不然会有bug
            scroll: true,  //类型:Boolean,设置拖拽的时候滚动条是否智能滚动。默认为真,则智能滚动,false则不智能滚动
            scrollSensitivity: 30,  //滚动的灵敏度,其实是拖拽离滚动边界的距离触发事件的距离边界+-30px的地方触发拖拽滚动事件,
            scrollSpeed: 10,  //滚动速度
            draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判断拖拽节点的父层是否是ou ul
            ghostClass: 'sortable-ghost',  // 排序镜像class,就是当鼠标拉起拖拽节点的时候添加该class
            chosenClass: 'sortable-chosen', // //为拖拽的节点添加一个class 开始拖拽鼠标按下去的时候 添加该class
            ignore: 'a, img',   //a 或者是img
            filter: null,  //改参数可以传递一个函数,或者字符串,字符串可以是class或者tag,然后用于触发oFilter函数,这样可以用来自定义事件等
            animation: 0, //拖拽动画时间戳
            setData: function (dataTransfer, dragEl) { //设置拖拽传递的参数
                dataTransfer.setData('Text', dragEl.textContent);
            },
            dropBubble: false,  // 发生 drop事件 拖拽的时候是否阻止事件冒泡
            dragoverBubble: false,  //发生 dragover 事件 拖拽的时候是否阻止事件冒泡
            dataIdAttr: 'data-id', //拖拽元素的id 数组
            delay: 0,  //延迟拖拽时间, 其实就是鼠标按下去拖拽延迟
            forceFallback: false,  // 不详
            fallbackClass: 'sortable-fallback',   // 排序回退class
            fallbackOnBody: false,// 是否把拖拽镜像节点ghostEl放到body上
     

 

下面是Sortable.js插件源码,本人花了一些时间做了注释,有兴趣的朋友可以研究下。如果您发现哪些地方有错误注释可以联系我的邮箱281113270@qq.com ; 技术交流qq群: 302817612

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5大数据可视化效果(二)可交互地铁线路图 - twaver

    HTML5大数据可视化效果(二)可交互地铁线路图 - twaver

    2016-11-04 14:00

  • 让IE9以下版本的浏览支持html5,CSS3的插件 - 叫我小龙哥

    让IE9以下版本的浏览支持html5,CSS3的插件 - 叫我小龙哥

    2016-11-04 12:00

  • HTML5 标签 details 展开 搜索 - 心韵

    HTML5 标签 details 展开 搜索 - 心韵

    2016-11-03 15:00

  • 自己写的HTML5 Canvas + Javascript五子棋 - 氢氦

    自己写的HTML5 Canvas + Javascript五子棋 - 氢氦

    2016-10-31 13:00

网友点评