前端vue拖拽
2024-10-13 09:42:06
工作上遇到的需求:页面上需要拖拽一个小方块div拷贝至保存的容器中。
一、可拖拽
那么我们需要对小方块div进行授权,设置draggable="true"允许其被拖动
二、定义拖拽事件
由于要对小方块进行拷贝,因此我们可以直接在拖拽开始的事件中对小方块进行拷贝
那么很显然拖拽时发生的操作我们会在drag函数中进行定义:
如:在拖动事件drag中对拖动的小方块进行了拷贝,保存在了dom中。当然有其他需求的可以再进行一些其他的操作。
三、容器的操作
对于容器而言,我们需要对其授权,操作dragover拖拽结束的事情,允许他被放下拖动的小方块。
备注:此事件是通过阻止原生事件来允许容器被放下拖拽的小方块。
四、拷贝事件
为了达到拷贝完成的效果,我们需要在容器的drop事件中定义好拖拽结束之后发生的事件,也就是我们需要在此将拷贝好的dom内容插入到容器中,达到渲染到页面上,完成整个拖拽事件的效果。
备注:在drop事件中,首先要阻止原生父事件,然后我将刚刚拷贝好的this.dom小方块直接通过appendChild插入到了页面的容器中,实现整个页面上拖拽渲染的整个过程。
总结:拖拽只需要定义好拖拽者允许拖拽draggable,容器允许被放置,同时定于好开始拖拽dragstart的事件以及拖拽结束dragover的事件,最后定义好放置事件drop即可完成。
最新文章
- SQL参数化查询自动生成SqlParameter列表
- checkbox和radio使用
- Git客户端图文详解如何安装配置GitHub操作流程攻略
- ExtJS实例1
- spring bean范围
- Python3基础 闭包 简单示例
- 手把手详解持续集成之GitLab CI/CD
- Sublime2 Package Control不可用修复
- centos7安装supervisor
- 第二阶段第六次spring会议
- mybatis_02简单操作数据库
- windows程序设计 显示一个窗口
- MySQL面试之说明myisam和innodb两种存储引擎的不同之处
- 不同版本的tomcat下载路径
- 网络协议之TCP
- openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一
- 深入浅出Spring(三) AOP详解
- C++之旅(第一天)
- 达梦数据库(DaMeng)如何删除IDENTITY自增属性字段
- CUDA与OpenGL互操作实例