vuejs2.0运用原生射流研究…实现简单拖拽元素功能

本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码，供大家参考，具体内容如下

！DOCTYPE html html hearteta name=' viewport ' content=' width=device-width，initial-scale=1.0，minimal-scale=1.0，maximum-scale=1.0，user-scalable=no '/meta charset=' utf-8 ' title/title meta name=' keywords ' content=' '/meta name=' description ' content=' '/style。select-item {底色： # 5bc 0de显示器：内联块；文本对齐：中心；边界半径： 3px右边距： 10px光标：指针指针；padd : 6px 20pxcolor : # fff }。cursored{ cursor:默认值；}.项目-内容，人-内容{ margin: 30px 50px}。人物-内容{ margin-top : 30px；}.drag-div { border : 1px solid # 5bc 0de；padding:10px边距-底部： 10px宽度： 800像素；光标：指针；}.select-project-item { display : inline-block；文本对齐：中心；边界半径： 3px}.拖拽-人物-标签{ margin-bottom :0；填充-右：10 px}[v-斗篷]{ display : none；}/style/head body div class=' drag-content ' id=' drag con ' div class=' project-content ' div class=' select-item ' drag able=' true ' @ drag start=' drag($ event)' v-for=' pjdt in project data ' { pjdt。name } }/div/div class=' people-content ' div class=' drag-div ' v-for=' ppdt in people data ' @ drop=' drop($ event)' @ drag over=' allowDrop($ event ' ' div class=' select ' var ss=new Vue({ ' El ' : ' # Dragcon '，data : { project data 3: [{ id :1，name: '葡萄}，{ id:2，name: '芒果}，{ id:3，name: '木瓜}，{ id:4，name: '榴莲}]，peopledata:[{ id:1，name: '小颖}，{ id:2，名称：'hover' }，{ id:3，名称： '空巢青年三}，{ id:3，name: '一丢丢}] }，mounted:function(){ this .$nextTick(function(){ }) }、watch : { project datas : { handler : function(val，oldval){ }、deep 3: rue }、people data : { handler : function(val，oldval){ }、deep 3: { methods 3: function(event){ DOM=event。CurrentTarget }、drop 3:函数(事件){ event .事件。目标。appendchild(DOM)；}，allowdrop :函数(事件){ event。prevent default()；} } });/脚本/正文/html实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。