html5长按 排序,H5 长按 拖拽排序的实现

H5 长按拖拽排序

产品需求: H5页面的一个列表,需要长按之后 然后拖拽排序;

vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝;

它基于Sortable.js打造,因此,其功能之强大,配置之丰富,在这里也毋庸赘言了;

由于其供了Sortable.js的所有特性, 所以配置也直接移步Sortable.js文档就可以了

具体方法:

npm i -S vuedraggable

然后就是引入使用,下面代码主要是 配置在H5页面上的长按拖拽 所以要在真机上调试,PC浏览器的模拟器长按拖拽可能会失效

{{item.name}}

import draggable from 'vuedraggable'

export default {

data() {

return {

list: [

{

id: '0',

name: "Aquamarine",

},

{

id: '1',

name: "Hotpink",

},

{

id: '2',

name: "Gold",

},

{

id: '3',

name: "Crimson",

},

{

id: '4',

name: "Blueviolet",

}

],

options: {

delayOnTouchOnly: true, //开启触摸延时

direction: 'vertical', //拖动方向

delay: 500, //延时时长

touchStartThreshold: 3, //防止某些手机过于敏感(3~5 效果最好)

chosenClass: 'chosen' //选中之后拖拽项添加的class名(用于选中时候添加样式)

}

}

},

components: {

draggable

}

}

.drag-list {

/*防止长按系统默认弹窗*/

-webkit-touch-callout: none;

-webkit-user-select: none;

user-select: none;

}

.drag-item {

margin-bottom: 10px;

background-color: #eee;

height: 60px;

line-height: 60px;

text-align: center;

}

.drag-item.chosen{

background-color: salmon;

}