Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Techniken zur einfachen Implementierung der Drag-Funktion in JavaScript HTML5
In diesem Artikel wird hauptsächlich Javascript HTML5 zur einfachen Implementierung der Drag-Funktion vorgestellt, die einen bestimmten Referenzwert hat
Ziehen und Drop (Drag and Drop) sind Standardkomponenten von HTML5, nämlich wie man ein Drag-Objekt wird, wie man ein Drag-Ziel wird und die -Ereignisse für das gezogene Objekt . die Ereignisse, die dem Drag-Ziel gehören, und wie Informationen zwischen Drag-and-Drop-Objekten übertragen werden.
Ereignisse, die dem gezogenen Objekt gehören
Dragstart (wird ausgelöst, wenn das Objekt gerade gezogen wird)
Drag (wird ausgelöst, nachdem das Dragstart-Ereignis ausgelöst wurde)
dragend (wird ausgelöst, wenn das Drag-Ereignis endet)
Ereignisse im Besitz des Drag-Ziels
Drager (wird ausgelöst, wenn das gezogene Element in das Drop-Ziel eintritt)
Dragover (wird ausgelöst, wenn das gezogene Element im Drop-Ziel verschoben wird, ähnlich wie bei Mouseover)
drop (wird ausgelöst, wenn das gezogene Element im Drop-Ziel platziert wird)
So wird man zu einem ziehbaren Objekt
In HTML kann das img-Element standardmäßig gezogen werden, und andere Elemente müssen auf ziehbar eingestellt werden =true. Sie können es ziehen.
<p draggable="true"></p>
So werden Sie ein Drag-Ziel
In HTML können Elemente standardmäßig nicht zu Drop-Zielen werden, wir deaktivieren lediglich das Standardverhalten von drapenter und Drapover-Ereignisse können als Drag-and-Drop-Ziele bezeichnet werden.
droptarget.addEventListener('dragenter', function(event) { event.preventDefault(); }); droptarget.addEventListener('dragover', function(event) { event.preventDefault(); });
So übertragen Sie Informationen zwischen Drag-and-Drop-Objekten
Im Ereignis gibt es ein dataTransferObjekt, das über zwei gängige Methoden verfügt setData() und getData() werden zum Speichern von Drag-and-Drop-Informationen bzw. zum Abrufen von Drag-and-Drop-Informationen verwendet. Unter diesen kann setData () nur zu Beginn des Drag-Ereignisses festgelegt werden, dh wenn das Dragstart-Ereignis festgelegt wird, und getData () wird im Allgemeinen abgerufen, wenn das Drop-Ereignis ausgelöst wird.
// drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); }); droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); });
Vollständiger Code
HTML5 拖拽 <p draggable="true"></p><script> var droptarget = document.getElementById('droptarget'); var dragobj = document.getElementById('dragobj'); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); }); droptarget.addEventListener(&#39;dragenter&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&#39;dragover&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script>
Es liegt ein Problem vor
Firefox-Browser Das Ziehen eines Bildes öffnet standardmäßig ein neues Fenster. Gemäß der erweiterten JavaScript-Programmierung ist das Standardereignis im Drop-Ereignis deaktiviert, was das Problem nicht löst.
Lösung: Wenn Sie das Bild als Hintergrundbild von p und p als Drag-Objekt verwenden, tritt dieses Problem nicht auf.
Endgültiger Code
HTML5 拖拽 <script> var droptarget = document.getElementById('droptarget'); var dragobj = document.getElementById('dragobj'); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); }); droptarget.addEventListener(&#39;dragenter&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&#39;dragover&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script>
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Techniken zur einfachen Implementierung der Drag-Funktion in JavaScript HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!