Der Inhalt dieses Artikels befasst sich mit der Implementierung der Drag-and-Drop-Funktion von HTML-Elementen in HTML5. Vor HTML5 musste man zum Implementieren von Drag & Drop js verwenden. Jetzt unterstützt HTML5 die Drag & Drop-Funktion intern, aber um etwas komplexere Funktionen zu implementieren, ist die Hilfe von js immer noch unverzichtbar. Schauen wir uns unten einige Beispiele an.
1. Erstellen Sie ein Drag-Objekt
Wir können dem Browser über das Draggable-Attribut mitteilen, welche Elemente die Drag-Funktion implementieren müssen. Draggable hat drei Werte: true: Das Element kann gezogen werden. False: Das Element kann nicht gezogen werden. Auto: Der Browser bestimmt, ob das Element gezogen werden kann.
Der Systemstandardwert ist auto, aber im automatischen Fall unterstützen Browser die Drag-and-Drop-Funktion verschiedener Elemente unterschiedlich. Beispielsweise werden img-Objekte unterstützt, div-Objekte jedoch nicht. Wenn Sie ein Element ziehen müssen, ist es daher am besten, Draggale auf „True“ zu setzen. Schauen wir uns unten ein Beispiel an:
🎜>{
float: left;
#target, #src > img 4px;
}
#target
{
width: 220px;
display: table; 🎜>#target > ; p
{
display: table-cell; 1px;
"true" id= "HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" src="img/1.jpg" alt="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" />
target">
hier ablegen
<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); /html> <br /><br /><br />Operationseffekt: <br />
<br /><br /><br />
<br /><br />2. Umgang mit Drag-Ereignissen <br /> <br />Jetzt lernen wir etwas über Drag-Ereignisse. Es gibt zwei Arten von Ereignissen: das Ereignis des Drag-Objekts und das Ereignis des Drag-Objekts Drop-Area-Ereignis. Zu den Drag-Ereignissen gehören: Dragstart: Wird ausgelöst, wenn das Ziehen des Elements beginnt. Drag: Wird während des Ziehens des Elements ausgelöst. Dragend: Wird ausgelöst, wenn das Ziehen des Elements endet. Schauen wir uns unten ein Beispiel an: <br /><br /><br /><br /><br /><br />Kopieren Sie den Code<br /><br /><br />Der Code lautet wie folgt:<br /><br /> <br />< !DOCTYPE> <br /><head> 🎜>{ <br />float: left; <br />#target, #src > img 4px; <br />} <br />#target <br />{ <br />width: 220px; display: table; 🎜>#target > p <br />{ <br />display: table-cell; 1px; <p>} <img alt="" src="http://files.jb51.net/file_images/article/201301/2013010716232011.png" />img.dragged { <br />background-color: Orange <strong>} body> ><img draggable="true" id="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" src="img/2.jpg" alt="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" /> <br /><img draggable="true" id="car3" src=" img/3. jpg" alt="car3" /> <br /><div id="target"> <br><p id="msg"> <div class="msgheader">hier ablegen <div class="right">< /div> <span style="max-width:90%" onclick="copycode(getid('phpcode133'));"><script> ); <u>var msg = document.getElementById("msg"); src.ondragstart = function (e) { e.target.classList.add("dragged"} src.ondragend = function (e) { e.target.classList.remove("dragged"); <div class="msgborder" id="phpcode133">msg.innerHTML = "drop here"; Funktion (e) { <br />msg.innerHTML = e.target.id;} <br /></script>
🎜>
Betriebseffekt:
3. Erstellen Sie einen Drop-Bereich Sehen wir uns die Ereignisse im Zusammenhang mit dem Drop-Bereich an: Dragenter: Wird ausgelöst, wenn das Drag-Objekt in den Drop-Bereich gelangt. Dragover: Wird ausgelöst, wenn sich das Drag-Objekt darin bewegt der Drop-Bereich; Dragleave: Wird ausgelöst, wenn das Drag-Objekt nicht im Drop-Bereich platziert wird und den Drop-Bereich verlässt. Drop: Wird ausgelöst, wenn das Drag-Objekt im Drop-Bereich platziert wird.
Sehen wir uns ein Beispiel an:
Beispiel *
{
float: left; Rand: 4px;
#target
{
height: 123px;
text-align: center;
}
#target > p
{
display: table-cell; margin: 1px;
}
img.dragged
{
background-color: lightgrey
}
< ;img draggable="true" id="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" src="img/2.jpg" alt="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" />
<script> target") ) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var newElem = document.getElementById(draggedID).cloneNode(false); innerHTML = "" ; <br />target.appendChild(newElem); <br />e.preventDefault(); <br />} <br />src.ondragstart = function (e) { <br />draggedID = e.target.id ; <br /> e.target.classList.add("dragged"); <br />src.ondragend = function (e) { <br />var elems = document.querySelectorAll(".dragged"); 🎜>for ( var i = 0; i < elems.length; i ) { <br />elems[i].classList.remove("dragged"); <br />} <br /></ script> <br /></script>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
