-->

WEB资讯

您的当前位置:首页 > 资讯 > WEB框架

sorttable的使用二-参数详解

2021-11-03 11:22:46  来源:admin 点击:600

参数

  • group:string or object

string:命名,个人建议用元素id就行,用处是为了设置可以拖放容器时使用,在array中的put的设置中再做介绍;
object:{name,pull,put}
        name:同string的方法,
        pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function      
              true:列表容器内的列表单元可以被移出;         
                 false:列表容器内的列表单元不可以被移出;            
                 'clone':列表单元移出,移动的为该元素的副本;
            function:用来进行pull的函数判断,可以进行复杂逻辑,
            在函数中return false/true来判断是否移出;
        put:put用来定义往这个列表容器放置列表单元的的设置,true/false/['foo','bar']/function    
                true:列表容器可以从其他列表容器内放入列表单元;          
                  false:与true相反;          
                    ['foo','bar']:这个可以是一个字符串或者是字符串的数组,
                    代表的是group配置项里定义的name值;
            function:用来进行put的函数判断,可以进行复杂逻辑,在函数中return false/true来判断是否放入;
  • sort:boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序;

  • delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间;

  • disabled:boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关;

  • animation:number 单位:ms,定义排序动画的时间;

  • handle:selector 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动;

  • filter:selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔;

  • draggable:selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放

  • ghostClass:selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式;

  • chosenClass:selector 格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个class;

  • forceFallback:boolean 如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等;

  • fallbackClass:string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式;

  • scroll:boolean 默认为true,当排序的容器是个可滚动的区域,拖放可以引起区域滚动

事件

  • onChoose:function 列表单元被选中的回调函数

  • onStart:function 列表单元拖动开始的回调函数

  • onEnd:function 列表单元拖放结束后的回调函数

  • onAdd:function 列表单元添加到本列表容器的回调函数

  • onUpdate:function 列表单元在列表容器中的排序发生变化后的回调函数

  • onRemove:function 列表元素移到另一个列表容器的回调函数

  • onFilter:function 试图选中一个被filter过滤的列表单元的回调函数

  • onMove:function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

  • onClone:function 当创建一个列表单元副本的时候的回调函数


事件对象

onUpdate :({to,from,item,clone,oldindex,newindex})=>{ }

  • to:HTMLElement–移动到列表容器

  • from:HTMLElement–来源的列表容器

  • item:HTMLElement–被移动的列表单元

  • clone:HTMLElement–副本的列表单元

  • oldIndex:number/undefined–在列表容器中的原序号

  • newIndex:number/undefined–在列表容器中的新序号

  • oldDraggableIndex: Number|undefined — 父类中的旧索引,仅计算可拖动元素

  • newDraggableIndex: Number|undefined — 父类中的新索引,只计算可拖动的元素

  • pullMode:String|Boolean|undefined — 如果拖动到另一个可排序的模式(“克隆”,真,或假),否则未定义


方法

  • option(name[,value])
    获得或者设置项参数,使用方法类似于jQuery用法,没有第二个参数为获得option中第一个参数所对应的值,有第二个参数时,将重新赋给第一个参数所对应的值;

  • closest
    对于集合中的每个元素,通过测试元素本身并遍历其在DOM树中的祖先,获得与选择器匹配的第一个元素。

  • toArray()
    将可排序项的数据id (dataIdAttr选项)序列化为字符串数组。

  • sort()
    根据数组对元素排序。

  • save()
    保存当前的排序(参见存储)

  • destroy()
    完全删除可排序功能。


相关文章更多 >

© 2024版权所有 水水网

电话:171780793