javascript,drop拖拽事件之vue实际应用

1,184 阅读1分钟

今天分享下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 元素已被拖动";
}

使用注意事项

  1. 被拖动节点必须添加draggable="true",然后使用ondragstart事件监听拖动开始。

  2. 如果想要再某节点上监听ondrop事件(拖动放置),必须先绑定ondragover且函数中需要阻止ondragover的默认行为。

  3. 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>