Vue de l'application pratique de Javascript, drop drag Event

Partager aujourd'huidropÉvénements,vueAttention à l'application dans.‍‍‍

javascriptEnvironnement,dropUtilisation

<p>Faites glisser d'avant en arrière dans deux boîtes rectangulaires p Élément:</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Faites - moi glisser.!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;"><strong>Attention!：</strong>Internet Explorer 8 Et plus tôt IE Version ou Safari 5.1 Et les versions antérieures du navigateur ne supportent pas drag Événements.</p>
<p id="demo"></p>
Copier le Code

function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Commencez à glisser p Élément";
}
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 L'élément a été traîné ";
}
Copier le Code

Précautions d'emploi

1. Noeud traîné Il fautAjouterdraggable="true",Ensuite, utilisezondragstart Événement Listening drag Start .

2. Si vous voulez écouter sur un autre noeud ondropÉvénements( Glisser et déposer ),Il fautLier d'abordondragover Et la fonction doit être bloquée ondragoverComportement par défaut pour.

3. vue De l'événement event Les paramètres doivent être **$eventPasser,v-on Les événements de traînée liés doivent être utilisés .native**Modificateur, L'événement prendra effet .

vueEnvironnement,dropUtilisation

<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>
Copier le Code