Heim > Artikel > Web-Frontend > Grundlagen der H5-Drag-and-Drop-API
Grundlagen der H5-Drag-and-Drop-API
- 大家讲道理Original
- 2017-05-28 11:07:392051Durchsuche
Machen Sie keinen Fehler, in diesem Artikel geht es nicht darum, wie man den Boden wischt. Freunde, die „JavascriptEssence“ gelesen haben, sollten wissen, dass der Prozess der Drag-and-Drop-Implementierung relativ kompliziert ist. Die Zeiten haben sich geändert. Wir können die neue Drag-and-Drop-API von H5 verwenden 🎜> Es ist sehr praktisch , den Drag-and-Drop-Effekt zu erzielen. Kürzlich traf ich einen Gärtnerkollegen im Garten, der einen Artikel „HTML5 Advanced Series: Drag-and-Drop-API zur Realisierung der Drag-and-Drop-Sortierung“ schrieb. Es ist wirklich die Arbeit eines Meisters. Als Neuling (kein Meister), Herr Xiong, kann ich mich damit nicht vergleichen, also habe ich das Basiskapitel gestartet, ich hoffe, dass alle Gartenfreunde etwas davon haben. 1. Ein einfaches Beispiel – ein paar Steine vom Boden aufheben
地上有石子，捡几个吧 我是篮子 我是地 石子 石子 石子 石子 石子 石子 石子 石子 石子 石子
(g
Die Demonstration verwendet Edge. Es ist zu mühsam, GIF auf meinem Ubuntu zu erstellen, also habe ich mir ein Windows ausgeliehen)
Hier wird ein einfaches Beispiel gezeigt, wie Drag & Drop implementiert wird. Aus der obigen Demonstration können Sie die Verwendung einiger
erraten. Was bedeuten diese Attribute? Kommen Sie einer nach dem anderen unten. 2. Allgemeine Schritte zum Implementieren von Drag & Drop
1. Finden Sie ein ziehbares Element
So wie nicht jeder Big Bear heißt, und nicht Alle Elemente können gezogen werden. Die Elemente „img“ und „a“ sind standardmäßig ziehbar, andere Elemente sind standardmäßig nicht ziehbar. Zu diesem Zeitpunkt können Sie „draggable=true“ hinzufügen, um es ziehbar zu machen.
<p draggable='true'></p>
Ereignisse Alle zugehörigen Ereignisse sind wie folgt: (Dies stammt von: http://www.cnblogs.com/linxin/p/6794542.html)
Quelle
Objekt- Dragstart: Das Quellobjekt beginnt mit dem Ziehen und Ablegen.
- Ziehen: Während des Drag-and-Drop-Vorgangs des Quellobjekts.
- Ziehen
- Ende Prozessobjekt:
- dragenter: Das Quellobjekt beginnt, in den Bereich des Prozessobjekts einzutreten.
- Dragover: Das Quellobjekt bewegt sich innerhalb des Geltungsbereichs des Prozessobjekts.
- dragleave: Das Quellobjekt verlässt den Gültigkeitsbereich des Prozessobjekts.
- Zielobjekt:
- drop: Das Quellobjekt wird per Drag & Drop in das Zielobjekt gezogen.
- Wir können einen Test verwenden, um zu sehen, wann diese Ereignisse ausgelöst werden und was die Ereignisobjekte sind.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>testEvents</title>
<style type="text/css">
.source{
width: 50px;
height: 50px;
border: 1px solid red;
}
.process{
width: 100px;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
.dest{
width: 100px;
height: 100px;
border: 1px solid green;
margin-top: 10px;
}
</style></head><body>
<p class="source" id="source" draggable="true"></p>
<p class="process" id="process"></p>
<p class="dest" id="dest"></p>
<script type="text/javascript">
window.onload=function(){ var source = document.getElementById("source"); var process = document.getElementById("process"); var dest = document.getElementById("dest"); var sourceEle;
source.addEventListener("dragstart",function(e){
console.log("source dragstart");
console.log(e);
sourceEle = e.target; var dt = e.dataTransfer;
dt.effectedAllowed = "all";
},false);
process.addEventListener("dragenter",function(e){
console.log("process dragenter");
console.log(e);
},false);
process.addEventListener("dragover",function(e){
console.log("process dragover");
console.log(e);
},false);
process.addEventListener("dragleave",function(e){
console.log("process dragleave");
console.log(e);
},false);
source.addEventListener("drag",function(e){
console.log("source drag");
console.log(e);
},false);
dest.addEventListener("dragend",function(e){
console.log("dest dragend");
console.log(e);
e.preventDefault();
},false);
dest.addEventListener("drop",function(e){
console.log("dest drop");
console.log(e);
dest.appendChild(sourceEle);
e.preventDefault();
e.stopPropagation();
},false);
document.ondragover = function(e){e.preventDefault();}
document.ondrop = function(e){e.preventDefault();}
} </script></body></html>
In diesem Beispiel werden die am Drag-and-Drop-Prozess beteiligten Ereignisse aufgeführt. Sie können die Konsole überprüfen, um die Reihenfolge, in der Ereignisse ausgelöst werden, und die Ereignisobjekte anzuzeigen.
3. Ein wichtiges Objekt, das DataTransfer-Objekt
Streng genommen wird es als Klasse bezeichnet Es wird im dataTransfer-Attribut des Ereignisobjekts gespeichert. Seine Attribute und Methoden sind in der folgenden Tabelle aufgeführt (von: http://www.cnblogs.com/ijjyo/p/4316232.html)
Vielen Dank für Ihre Zusammenfassung, ich habe Ihnen so viele Dinge mitgebracht , danke ah.
Führen Sie unten einige einfache Tests durch
Über die WirkungZulässig und dropEffect
, hier ist ersteres auf effectAllowed gesetzt und letzteres wird über die Dropdown-Liste ausgewählt, um die Anzeige verschiedener Mausstile zu erleichtern.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>testEvents</title>
<style type="text/css">
.source{
width: 50px;
height: 50px;
border: 1px solid red;
}
.process{
width: 100px;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
.dest{
width: 100px;
height: 100px;
border: 1px solid green;
margin-top: 10px;
}
</style></head><body>
<select id="dpe">
<option value="copy">copy</option>
<option value="move">move</option>
<option value="link">link</option>
<option value="none">none</option>
</select>
<p class="source" id="source" draggable="true"></p>
<p class="process" id="process"></p>
<p class="dest" id="dest"></p>
<script type="text/javascript">
window.onload=function(){ var source = document.getElementById("source"); var process = document.getElementById("process"); var dest = document.getElementById("dest"); var dpe = document.getElementById("dpe"); var dpev;
dpe.onchange = function(){
dpev = this.value;
} var sourceEle;
source.addEventListener("dragstart",function(e){
console.log("source dragstart");
console.log(e);
sourceEle = e.target; var dt = e.dataTransfer;
dt.effectedAllowed = "all";
},false);
dest.addEventListener("dragend",function(e){
console.log("dest dragend");
console.log(e);
e.preventDefault();
},false);
dest.addEventListener("drop",function(e){
console.log("dest drop");
console.log(e);
dest.appendChild(sourceEle);
e.preventDefault();
e.stopPropagation();
},false);
document.ondragover = function(e){
e.dataTransfer.dropEffect = dpev;
e.preventDefault();
}
document.ondrop = function(e){e.preventDefault();}
} </script></body></html>
Ich habe die Methode auf Ubuntu
ome getestet und das gefunden Sie sind alle einhändig, können aber nicht hineingezogen werden, wenn sie auf „Keine“ eingestellt sind. Es kann einige Unterschiede in verschiedenen Systemen geben.
Über die Methoden setData() und getData()Diese beiden Methoden beziehen sich auf den Datenaustausch, und der erste Parameter ist ein Mime Typ.
String, der zweite ist Daten; letzterer übergibt einen Parameter, der ein Mime-Typ ist. Verfügbare MIME-Typen sind text/plain, text/html, text/xml, text/uri-list. Testfall: Ziehen Sie den Menüpunkt auf das Notizbuch.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>点菜</title>
<style type="text/css">
.menu{
width: 200px;
height: 300px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.record{
width: 200px;
height: 300px;
border: 1px solid black;
margin-right: 10px;
float: left;
}
</style></head><body>
<ul class="menu" id="menu">
<li draggable="true">糖醋排骨</li>
<li draggable="true">青椒肉丝</li>
<li draggable="true">武昌鱼</li>
<li draggable="true">手撕包材</li>
<li draggable="true">千叶豆腐</li>
</ul>
<ul class="record" id="record">
</ul>
<script type="text/javascript">
window.onload = function(){ var menu = document.getElementById("menu"); var record = document.getElementById("record");
menu.addEventListener("dragstart",function(e){ var dt = e.dataTransfer; var tar = e.target; if(tar.tagName=="LI"){
dt.setData("text/plain",tar.innerHTML);
}
dt.effectedAllowed = "all";
},false);
record.addEventListener("drop",function(e){ var li = document.createElement("li");
li.appendChild(document.createTextNode(e.dataTransfer.getData("text/plain")));
record.appendChild(li);
e.stopPropagation();
},false);
record.addEventListener("dropend",function(e){
e.preventDefault();
},false);
document.addEventListener("dragover",function(e){e.preventDefault()},false);
document.addEventListener("drop",function(e){e.preventDefault()},false);
} </script></body></html>
关于setDragImage(Element img,long x,long y)
这个方法是设置拖放时的图标的，第一个参数表是图标元素，第二个表示相对与光标的水平偏移，第三个是垂直的。
还是前面的例子，在dragstart事件添加下面的代码，拖动时你会发现一只很大的手（不要被吓到）;
var img = document.createElement("img");
img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493802056263&di=232de2c30491e19f32833669ad5a67ae&imgtype=0&src=http%3A%2F%2Fstatic.freepik.com%2Ffree-photo%2Fone-finger_318-10333.jpg";
dt.setDragImage(img,10,10);
四、关于拖放数据传递
上面的例子已经谈到了拖放的数据传递方法，这里在总结一下。
1、通过dataTransfer的setData()和getData()方法传递
2、通过闭包的方法，请参考开篇的例子。
五、总结
HTML5的拖放api非常简洁实用，为我们省去了很多麻烦，如果没有它，我们可能需要通过mousedownmousemove等等事件才能实现上述功能。本文较为详细的介绍了相关api，希望对你有所帮助。关于拖放api的应用大家可以参看下面链接的文章，他做了一个拖放排序，这是一个比较常见的应用场景。
大～熊同学的粉丝数正在逼近三位数，感谢各位园友的支持，大～熊会继续努力的！
参考：
http://www.cnblogs.com/ijjyo/p/4316232.html
http://www.cnblogs.com/linxin/p/6794542.html
Das obige ist der detaillierte Inhalt vonGrundlagen der H5-Drag-and-Drop-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen