easy

DocsVersion : 0.1.0

Sortable 拖动排序组件

Define in : sortable.js

通过鼠标拖拽和放置,对一组或多组元素进行排序。

Sortable( target, [ options ] )

依赖
JS : 依赖 Drop 组件
CSS : 不依赖
HTML : 不固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅对第一个匹配元素的所有子元素绑定拖放排序。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
connect String null

允许符合选择器匹配的拖放排序列表插入到当前拖放排序列表中。

disable String null

禁止拖拽列表中符合该选择器匹配的子元素进行拖放排序操作。

方法
  • destroy

    销毁拖放排序实例。

  • on

    对拖放排序实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载拖放排序实例的事件。该方法接受1个需要卸载的事件类型的参数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
moved

拖拽元素排序后其 DOM 位置发生了变化所触发的事件。

event.drag 拖拽元素。

event.drop 拖放元素。

event.target 绑定拖动排序的元素。

在使用 Sortable 组件前,对其进行加载。

E.use( 'sortable', function(){
    // 在回调中实例化拖放排序
});
例子1

对左右 2 个列表绑定拖放排序,左边(list1)列表的元素可以拖放至右边的列表,右边(list2)列表的元素不能拖放至左边的列表中。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • A
  • B
  • C
  • D
  • E
  • F
var Sortable = E.ui.Sortable;
    
new Sortable( '#list1' );

new Sortable( '#list2', {
    connect : '#list1'
});