So implementieren Sie das Ziehen von Elementen in HTML5_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

So implementieren Sie das Ziehen von Elementen in HTML5_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:51:44

Original

1615 Leute haben es durchsucht

Viele Frontends verstehen wahrscheinlich nicht, wie man HTML5-Drag-and-Drop implementiert. Dieser Artikel gibt Ihnen einige Ideen. Organisieren und sichern Sie Dateien, um sie später leichter nachschlagen zu können.

Erstes Beispiel:

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html>
<Kopf>
<meta charset="UTF- 8">
<Titel>ZiehenTitel>
<Stil>
.box{
Breite: 400px;
Höhe: 400px;
float: links;
}
#box1{
Hintergrund: #CCC;
}
#box2{
Hintergrund: #FF0;
}
Stil>
Kopf>
<Körper>
<div id="box1" Klasse="box">div>
<div id="box2" Klasse="box">div>
<img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

JavaScript-Code复制内容到剪贴板

"app1.js">
app1.js
/**
* app1.js
*/
var oBox1,
oBox2,
oImg1;
window.onload = function(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = Funktion(e){
e.preventDefault();
};
//
oImg1.ondragstart = Funktion(e){
e.dataTransfer.setData('text', e.target.id);
};
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
};
Funktion dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

Wissenspunkte einbeziehen

Die folgenden Ereignisse werden während des Drag-and-Drop-Vorgangs ausgelöst:
Lösen Sie ein Ereignis auf dem Drag-Ziel (Quellelement) aus
ondragstart – der Benutzer startet Ziehen des Elements Wird ausgelöst, wenn
ondrag – Wird ausgelöst, wenn das Element gezogen wird
ondragend – Wird ausgelöst, nachdem der Benutzer das Ziehen des Elements beendet hat

Ereignis wird ausgelöst, wenn das Ziel losgelassen wird
ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in seinen Containerbereich gelangt
ondragover – Wenn ein Objekt wird gezogen Dieses Ereignis wird ausgelöst, wenn das gezogene Objekt in den Containerbereich eines anderen Objekts gezogen wird
ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Containerbereich verlässt
ondrop – Während eines Ziehvorgangs Dieses Ereignis wird ausgelöst, wenn die Maustaste losgelassen wird

Ereignisobjekt (ersetzt durch e)

e.target

Die Erklärung auf W3Cschool lautet: Geben Sie das Element zurück, das dieses Ereignis ausgelöst hat (den Zielknoten des Ereignisses). Dieses Zielattribut ist nur mit ie9 und höher kompatibel

e.preventDefault()

Brechen Sie die Standardaktion des Ereignisses ab.

e.dataTransfer.setData()

Legen Sie den Datentyp und den Wert der gezogenen Daten fest:

Kopieren Sie den Code

Der Code lautet wie folgt:

e. dataTransfer.setData("Text",ev.target.id); //Der erste Parameter ist Text (Kleinbuchstaben sind ebenfalls akzeptabel)

e.dataTransfer.getData()

Holen Sie sich die gezogenen Daten:

Kopieren Sie den Code

Der Code lautet wie folgt:

e.dataTransfer .getData( "Text");