今天分享下drop事件，vue中应用需要注意的事项。🐱🏍🐱🏍🐱🏍
javascript环境下，drop用法
<p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "开始拖动 p 元素";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = " p 元素已被拖动";
}
使用注意事项
-
被拖动节点必须添加draggable="true"，然后使用ondragstart事件监听拖动开始。
-
如果想要再某节点上监听ondrop事件(拖动放置)，必须先绑定ondragover且函数中需要阻止ondragover的默认行为。
-
vue中事件的event参数需要用**$event传递，v-on绑定的拖拽事件需使用.native**修饰符，事件才会生效。
vue环境下，drop用法
<el-menu-item-group>
<el-menu-item
index="1-1"
:key="k"
v-for="(val,k) in item.content"
@drop.native="drop($event)"
@dragstart.native="dragstart($event,val,item.type)"
draggable="true">
{{val.name}}
</el-menu-item>
</el-menu-item-group>
<el-form
:inline="true"
v-for="(item,k) in item2"
:child="item.id"
:key="k"
@drop.native="drop($event,item)"
@dragover.native="allowDrop($event)"
@contextmenu.native="rightClickLayer(item,item2)">
</el-form>
