您当前的位置：首页 > 网站建设 > javascript
\| php \| asp \| css \| H5 \| javascript \| Mysql \| Dreamweaver \| Delphi \| 网站维护 \| 帝国cms \| React \| 考试系统 \| ajax \| jQuery \| 小程序 \|

vue拖拽添加的简单实现

51自学网 2022-02-21 13:34:48

javascript

本文主要介绍了vue拖拽添加的简单实现，具体如下：

效果图

并没有判断是否重复,没有删除旧数据

数据体

 <MyShuttle :dataOrigin='[          {            Name:"数据001",            Id:"数001",          },          {            Name:"数据002",            Id:"数001",          },          {            Name:"数据003",            Id:"数001",          }]'                 :space='[{            Name:"右001",            Id:"右001",            }]' />

代码

draggable开启可拖动

@dragenter.prevent @dragover.prevent// 阻止浏览器默认行为，不然会显示一个叉叉，不好看

阻止默认行为

@dragleave.stop=“dragleave($event, ‘main')”

进入离开当前元素都会触发

@dragend.stop=“dragEnd($event, item)”

放下拖拽内容触发

拖拽事件和属性

标记
下载地址:
Pygame代码
 vue中keep-alive多级路由缓存问题