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

H5 长按拖拽排序

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

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

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

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

具体方法:

npm i -S vuedraggable

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

import draggable from 'vuedraggable'

export default {

data() {

return {

list: [

{

id: '0',

{

id: '1',

{

id: '2',

{

id: '3',

{

id: '4',

}

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;

}

html5长按排序,H5 长按拖拽排序的实现相关推荐

html5 list 拖拽排序,vue实现可拖拽排序的列表
在做友情链接管理功能的时候,考虑到有个对友情链接排序的需求,开始的时候我是在这个list 里边加了rank字段,用户需要手动输入rank ,点击保存后,后台通过用户输入的rank序号进行排序,这显然 ...
android gridview拖动排序,Asp.net GridView 拖拽排序原创（欢迎拍砖，敬请嘴下留情！）...
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...
Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
移动端拖拽排序 html,移动端拖拽排序
var drag = { bindDragEvent: function (isF) { var father = document.getElementById("public_theme ...
html实现拖拽排序,简单的jquery拖拽排序效果实现代码
步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标进行计算和判断来确定要插入的目标元素: 4.用insertBefore 方法插入到目标元素 ...
RecyclerView长按拖拽排序，缩短长按响应时间，长按0.1秒就可以开始拖动
RecyclerView长按拖拽排序 ,缩短长按响应时间,长按0.1秒就可以开始拖动度娘搜索RecyclerView长按拖拽排序,很多文章讲解,没找到缩短长按响应时间的,所以自己研究了一下先看效果 ...
php实现拖拽排序,H5实现拖拽排序的代码
本篇文章给大家带来的内容是关于H5实现拖拽排序的代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.需求豆果食谱系统,sku列表实现拖拽排序,如图: 二.HTML5拖放API ...
html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...

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

html5长按排序,H5 长按拖拽排序的实现相关推荐

最新文章

热门文章

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

html5长按 排序,H5 长按 拖拽排序的实现相关推荐

最新文章

热门文章

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

html5长按排序,H5 长按拖拽排序的实现相关推荐