uniapp拖拽元素交换元素的位置,对元素进行一个排序,兼容H5和App。

1、安装npm install sortablejs --save插件

2、    import Sortable from 'sortablejs'导入插件sortable


个人特色:添加
	
	{{item}}
	
	

	
	
	

3、H5

mounted() {
			// #ifdef H5
		Sortable.create(document.getElementById("foo"), {
			animation: 150, //动画参数
			onAdd: function(evt) {
				//拖拽时候添加有新的节点的时候发生该事件
				console.log("onAdd.foo:", [evt.item, evt.from]);
			},
			onUpdate: function(evt) {
				//拖拽更新节点位置发生该事件
				console.log("onUpdate.foo:", [evt.item, evt.from]);
			},
			onRemove: function(evt) {
				//删除拖拽节点的时候促发该事件
				console.log("onRemove.foo:", [evt.item, evt.from]);
			},
			onStart: function(evt) {
				//开始拖拽出发该函数
				console.log("onStart.foo:", [evt.item, evt.from]);
			},
			onSort: function(evt) {
				//发生排序发生该事件
				console.log("onSort.foo:", [evt.item, evt.from],evt.from.innerText);
				// 索引5移到索引4的位置,索引变化
				// evt.newDraggableIndex -- 4
				// evt.newIndex  --4
				// evt.oldDraggableIndex  --5
				// evt.oldIndex   --5
			},
			onEnd: function(evt) {
				//拖拽完毕之后发生该事件
				console.log("onEnd.foo:", [evt.item, evt.from]);
			},
			})
				// #endif
				},

4、App需要在创建一个script标签,lang=renderjs

你可能感兴趣的:(uni-app)