前端vue拖拽
工作上遇到的需求:页面上需要拖拽一个小方块div拷贝至保存的容器中。
一、可拖拽
那么我们需要对小方块div进行授权,设置draggable="true"允许其被拖动
二、定义拖拽事件
由于要对小方块进行拷贝,因此我们可以直接在拖拽开始的事件中对小方块进行拷贝
那么很显然拖拽时发生的操作我们会在drag函数中进行定义:
如:在拖动事件drag中对拖动的小方块进行了拷贝,保存在了dom中。当然有其他需求的可以再进行一些其他的操作。
三、容器的操作
对于容器而言,我们需要对其授权,操作dragover拖拽结束的事情,允许他被放下拖动的小方块。
备注:此事件是通过阻止原生事件来允许容器被放下拖拽的小方块。
四、拷贝事件
为了达到拷贝完成的效果,我们需要在容器的drop事件中定义好拖拽结束之后发生的事件,也就是我们需要在此将拷贝好的dom内容插入到容器中,达到渲染到页面上,完成整个拖拽事件的效果。
备注:在drop事件中,首先要阻止原生父事件,然后我将刚刚拷贝好的this.dom小方块直接通过appendChild插入到了页面的容器中,实现整个页面上拖拽渲染的整个过程。
总结:拖拽只需要定义好拖拽者允许拖拽draggable,容器允许被放置,同时定于好开始拖拽dragstart的事件以及拖拽结束dragover的事件,最后定义好放置事件drop即可完成。
前端vue拖拽的更多相关文章
- Vue拖拽组件
vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- vue 拖拽移动(类似于iPhone虚拟home )
vue 移动端 PC 兼容 元素 拖拽移动 效果演示 事件知识点 移动端 PC端 注释 touchstart mousedown 鼠标/手指按下事件 touchmove mousemove 鼠标/手 ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- vue2-dragula vue拖拽组件
https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragu ...
- vue拖拽插件(弹框拖拽)
// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
- Vue拖拽交换数据(非插件)
HelloWorld.vue 文件 <template> <div class="hello"> <h1>{{ msg }}</h1> ...
- 一个全新的Vue拖拽特性实现:“调整尺寸”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...
随机推荐
- java单例模式总结
目录 一. 饿汉模式(静态初始化) 二.双重检查锁(dcl) 三. 延迟占位类 四.枚举实现 最后 常见安全的单例实现代码和自己的一点理解. 一. 饿汉模式(静态初始化) class Singleto ...
- Long类型参数传到前端精度丢失的解决方案
由于公司数据库表的id是利用雪花算法生成的,所以实体类里面定义的数据类型为Long.但是这个数据传到前端时,发生了精度丢失的现象.本文记录了从java后端的角度如何解决这个精度丢失的问题,便于 ...
- Python通过pip方式安装第三方模块的两种方式
一:环境 python3.6 windows 10 二:常用命令 如果直接执行pip命令报错,说明pip不在path环境变量中 解决方法: python -m pip list 以下默认可直接使用pi ...
- Python 学习 第十四篇:命名元组
Python的元组不能为元组内部的数据进行命名,而 collections.namedtuple 可以来构造一个含有字段名称的元组类,命名元组可以通过逗号+字段名来获取元素值: collections ...
- 二十:让行内元素在div中垂直居中
(1)使用display:table-cell配合vertical-align:center(淘宝也是这样用的) <div class="method4"> <s ...
- github/gitlab同时管理多个ssh key
之前一直用github,但是github有一个不好的地方,要是创建私有的项目的话需要付费,而gitlab上则可以免费创建管理私有的项目.由于最近想把自己论文的一些东西整理一下,很多东西还是不方便公开, ...
- H5 61-浮动元素贴靠现象
61-浮动元素贴靠现象 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Linux—vim常用命令
vim常用命令: 1. 键入i进入编辑模式2. esc进入命令模式3. a,进入编辑模式3. b,光标移动到单词前,end,光标移动到行尾4. home光标移动到行首5. cc,删除当前行,并进入编辑 ...
- Day14 Python基础之os/sys/hashlib模块(十二)
os模块 os.getcwd() #获取当前工作路径 os.chdir(‘dirname1/dirname2/dirname3’) #改变当前脚本的工作路径,相当于cmd下的cd os.makedi ...
- 【学习总结】GirlsInAI ML-diary day-1-初识Python-Anaconda-Jupyter
[学习总结]GirlsInAI ML-diary 总 原博github链接-day1 初识Python-Anaconda-Jupyter: 1-下载并安装Anaconda 官网下载,按指导安装 ana ...