Sortable.js 拖放排序插件

Sortable.js是一款轻量级的拖放排序列表的js插件

1. 安装
	$ npm install sortablejs --save

2. 使用
	定位到需要排序的对象，创建Sortable对象并添加响应配置设置
	可以通过方法：
		var sortable = Sortable.create(el,{})  或者 
		var sortable = new Sortable(el, {})  创建Sortable对象
	实例：
		<ul id="items">
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
		</ul>
		var el = document.getElementById('items')
		var sortable = Sortable.create(el,{/*配置项*/})

3. 配置项
	var sortable = new Sortable(el, {
		group: "name", // string or object
		/* 
			当为string时的作用仅为命名 
			当为object时的属性：{name,pull,put}
			name: 同string的作用
			pull： 定义从这个列表容器移动出去的设置
				属性值：
					true:列表容器内的列表单元可以被移出；
                    false：列表容器内的列表单元不可以被移出；
                    'clone'：列表单元移出，移动的为该元素的副本；
                    function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出
		*/
		sort: true, // boolean
		/*
			定义表单元是否可以在列表容器内进行拖拽排序
		*/
		delay: 0, // number
		/*
			定义鼠标选中列表单元可以开始拖动的延迟时间
		*/
		disabled: false, // boolean 
		/*
			定义此sortable对象是否可用
				属性：
					true: sortable对象不能拖放排序等功能
					false: 可以进行排序
		*/
		store: null,
		animation: 150, // number 
		/*
			单位：ms，定义排序动画的时间
		*/
		handle: ".my-handle", // 格式为css选择器的字符串
		/*
			使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
		*/
		filter: ".ignore-elements", // 格式为css选择器的字符串
		/*
			定义不能进行拖放的列表单元，可设置为多个选择器，中间用“，”分隔
		*/
		draggable: ".item", // 格式为css选择器的字符串
		/*
			定义可以进行拖放的列表单元
		*/
		ghostClass: ".sortable-ghost", // 格式为css选择器的字符串
		/*
			当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况
			此配置项就是来给这个影子单元添加一个class，可以通过这种方式来给影子元素进行编辑样式；
		*/
		chosenClass: ".sortable-chosen", // 格式为css选择器的字符串
		/*
			当选中列表单元时会给该单元增加一个class
		*/
		dragClass: "sortable-drag", 
		dataIdAttr: 'data-id',
		forceFallback: false, // boolean 
		/*
			属性值：
				true: 不使用原生的html5的拖放，可以修改一些拖放中元素的样式等
				false: 使用原生的html5的拖放
		*/
		fallbackClass: ".sortable-fallback", // 格式为css选择器的字符串 
		/*
			当forceFallback设置为true时，拖放过程中鼠标附着单元的样式
		*/
		fallbackOnBody: false,
		fallbackTolerance: 0,
		scroll: true, // boolean 默认为true
		/*
			当排序的容器是个可滚动的区域，拖放可以引起区域滚动
		*/
		scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // 自动滚动
		scrollSensitivity: 30, // 滚动灵敏度 单位px
		scrollSpeed: 10, // 滚动速度
		setData: function (dataTransfer, dragEl) {},
		onChoose: function (evt) {}, // 被选中的回调函数
		onStart: function (evt) {}, // 开始拖拽的回调函数
		onEnd: function (evt) {}, // 拖放结束的回调函数
		onAdd: function (evt) {}, // 添加到本列表容器的回调函数
		onUpdate: function (evt) {}, // 列表容器中排序变化的回调函数
		onSort: function (evt) {}, // 列表容器排序回调
		onRemove: function (evt) {}, // 元素移动到另一列表容器的回调函数
		onFilter: function (evt) {}, // 过滤回调
		onMove: function (evt, originalEvent) {}, // 元素在列表容器中移动的回调函数
		onClone: function (evt) {} // 创建一个列表单元副本的时候的回调函数
	})

4. 事件对象
    to：HTMLElement--移动到列表容器
    from：HTMLElement--来源的列表容器
    item：HTMLElement--被移动的列表单元
    clone：HTMLElement--副本的列表单元
    oldIndex：number/undefined--在列表容器中的原序号
    newIndex：number/undefined--在列表容器中的新序号

官方说明文档：
https://github.com/SortableJS/Sortable

Sortable.js 拖放排序插件

猜你喜欢