Vue.js实现拖放效果的实例

页面效果如下所示：

代码请看这里，当当当当：

html:

模板div class='拖动-内容' div class='项目-内容' div class='选择-项目'可拖动=' true ' @ drag start=' drag($ event)' v-for=' pjdt在项目数据“{ pjdt。name } }/div/div class=' people-content ' div class=' drag-div ' v-for=' people data ' @ drop=' drop($ event)' @ drag over=' allowDrop($ event ' ' div class=' select-project-item '在这行代码中小颖在绑定拖动开始事件时，拖动($事件)写法和射流研究…写法不一样，如果你在某视频剪辑软件中绑定事件时要传事件，你不能像射流研究…那种格式去写，比如：@dragstart='drag(事件)'这个写的话你在拖方法中获取到的事件是未定义，因为它把@dragstart='drag(事件)'中的事件当成了一个变量，而该变量并没有在数据中定义所以就是未定义。早上小颖就碰到过此坑。所以切记格式是介个酱紫的： @dragstart='drag($event)'

射流研究…代码：

脚本让DOM=null导出默认值{ components : }、ready: function() {}、methods : { drag : function(event){ DOM=event。currenttarget }、drop :函数(事件){ event。prevent default()；事件。目标。appendchild(DOM)；}，allowdrop :函数(事件){ event。prevent default()；}，}，data(){ return { project datas : [{ id :1，name: '葡萄，}，{id:2，name: '芒果，}，{id:3，name: '木瓜，}，{id:4，name: '榴莲，}]，peopledata:[{id:1，name: '小颖，}，{id:2，名称： '悬停'，}，{id:3，名称： '空巢青年三，}，{id:3，name: '一丢丢，}]} } }/脚本以上所述是小编给大家介绍的Vue.js实现拖放效果的实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！