vue中使用h5 drag实现拖拽功能

先了解一下h5中的drag事件：

先贴一段代码：
先设置draggable属性为true

//开始拖拽时执行 通过e.dataTransfer.setData 设置数据handleDragStart (e, item) {e.dataTransfer.setData('draggingData', item);this.dragging = item; // 第二种写法，不使用setData那种写法，自己在data中定义一个变量},

// 拖拽完成事件(停止拖拽删除)handleDragEnd (e) {e.dataTransfer.clearData(); // 第一种方法this.dragging = null; // 第二种方法},

（ondragenter）当元素被拖动至有效的拖放目标时运行脚本，但是我们也直接可以使用ondrop事件

dropEvent (e, item, selectedRules) {const moveData = e.dataTransfer.getData('draggingData');const newRulesArr = [...this[selectedRules]];// // 找出当前移动索引目标索引const moveIndex = newRulesArr.indexOf(moveData);// // 找出当前移动之后索引const finishIndex = newRulesArr.indexOf(item);// // 赋值操作 // 删除源数据，返回被删除的数据数组 // 删除源数据，返回被删除的数据数组newRulesArr.splice(finishIndex, 0, ...newRulesArr.splice(moveIndex, 1));this[selectedRules] = newRulesArr;},

vue中使用h5 drag实现拖拽功能相关推荐

vue中使用sortable插件实现拖拽 upload上传图片改变顺序
下载依赖 npm install sortablejs --save 在script里面导入import Sortable from "sortablejs"; 在需要改变顺序的标 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
Atitit。DD dragdrop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
如何在vue中实现拖拽功能
HTML5 drag & drop 拖拽与拖放想要实现该功能,先了解一下H5中的drag和drop这2个概念.
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
html5长按排序,H5 长按拖拽排序的实现
H5 长按拖拽排序产品需求: H5页面的一个列表,需要长按之后然后拖拽排序; vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝; 它基于Sort ...
vue：实现简单的拖拽功能
背景平常做业务很容易遇到拖拽功能,没做之前总觉得会很复杂,今天来看一下到底是怎么实现的. 拖拽API 这是 HTML5 新增的 API,当给元素设置 draggable="true&quo ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
java swing 控件拖动_java swing中实现拖拽功能示例
java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: package com; import java.awt.*;import java.awt.datat ...

vue中使用h5 drag实现拖拽功能

vue中使用h5 drag实现拖拽功能相关推荐

最新文章

热门文章

vue中 使用h5 drag实现拖拽功能

vue中 使用h5 drag实现拖拽功能相关推荐

最新文章

热门文章

vue中使用h5 drag实现拖拽功能

vue中使用h5 drag实现拖拽功能相关推荐