Sprechen Sie über ein tiefgreifendes Verständnis des nativen JavaScript-Drag-and-Drops

Die vorherigen Wörter

Drag-and-Drop (DnD) besteht eigentlich aus zwei Aktionen – Drag-and-Drop. Es handelt sich also um zwei Elemente. Das eine ist das zu ziehende Element, die sogenannte Drag-and-Drop-Quelle; das andere ist das Ziel, das abgelegt werden soll, das sogenannte Drag-and-Drop-Ziel. In diesem Artikel wird natives Drag & Drop im Detail vorgestellt, indem diese beiden Konzepte aufgeteilt werden:

Drag-and-Drop-Quelle

Welche Art von Element ist die Drag-and-Drop-Quelle?

HTML5 gibt ein ziehbares Attribut für alle HTML-Elemente an, das angibt, ob das Element gezogen werden kann.

Das ziehbare Attribut von Bildern und Links wird automatisch auf true gesetzt, während andere Der Standardwert dieses Attributs des Elements ist „false“

[Hinweis] Draggable='true' muss festgelegt werden, damit es wirksam wird. Nur die Einstellung „draggable“ funktioniert nicht

Standardmäßig kann Text nur gezogen werden, wenn er ausgewählt ist, während Bilder und Links jederzeit gezogen werden können. Andere Elemente können nicht per Drag-and-Drop verschoben werden

<input value="文字可拖动">
<img alt="图像可拖动" src="http://files.cnblogs.com/files/xiaohuochai/zan.gif">
<a href="#">链接可拖动</a>
<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>

Wenn das Draggable-Attribut für das Element festgelegt ist, können auch gewöhnliche Elemente per Drag & Drop verschoben werden

<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

Kompatibel

IE9-Browser unterstützt das Draggable-Attribut nicht, aber die Methode dragDrop() kann über den Mousedown-Ereignishandler aufgerufen werden, um den Drag-Effekt zu erzielen

<div id="test" style="height:30px;width:300px;background:pink;"></div>
<script>
test.onmousedown = function(){
this.dragDrop();
}
</script>

　[Hinweis] Wenn Firefox das Draggable-Attribut unterstützen soll, müssen Sie einen ondragstart-Ereignishandler hinzufügen und die setData()-Methode für das dataTransfer-Objekt verwenden, um den Effekt zu starten

Drag-and-Drop-Ereignis

Die Drag-and-Drop-Quelle umfasst 3 Drag-and-Drop-Ereignisse. Beim Ziehen und Ablegen der Quelle werden nacheinander die drei Ereignisse Dragstart, Drag und Dragend ausgelöst.

Dragstart

Wenn die Maustaste gedrückt wird und die Maus zu bewegen beginnt verschoben werden, wird das Dragstart-Ereignis auf dem Drag-and-Drop-Element ausgelöst. Zu diesem Zeitpunkt ändert sich der Cursor in ein Symbol „Kann nicht platziert werden“ (im Kreis befindet sich ein Backslash), was darauf hinweist, dass das Element nicht über sich selbst platziert werden kann

Ziehen

Dragstart auslösen Nach dem Ereignis wird das Drag-Ereignis sofort ausgelöst, und dieses Ereignis wird weiterhin ausgelöst, während das Element gezogen wird

dragend

Wenn das Ziehen stoppt (unabhängig davon, ob das Element gezogen wird oder ob es auf einem gültigen oder einem ungültigen Platzierungsziel platziert wird), wird das Dragend-Ereignis

<div id="test" draggable="true" style="height:30px;width:100px;background:pink;">0</div>
<script>
var timer,i=0;
test.ondragstart = function(){
this.style.backgroundColor = &#39;lightgreen&#39;;
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = i++;
},100)
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;
this.style.backgroundColor = &#39;pink&#39;;
}
</script>

ausgelöst

Drag-and-Drop-Ziel

Das Drag-and-Drop-Ziel bezieht sich auf das Ziel, an dem das gezogene Element platziert wird, wenn die Maus losgelassen wird

Wann Die Drag-and-Drop-Quelle wird zum Drag-and-Drop-Ziel gezogen, Dragenter und Dragover werden nacheinander ausgelöst und die vier Ereignisse Dragleave oder Drop

Dragenter

Solange ein Element zum Drop-Ziel gezogen wird, wird das Dragenter-Ereignis

Dragover

ausgelöst, wenn sich das gezogene Element innerhalb des Drop-Bereichs bewegt Ziel, das Dragover-Ereignis wird weiterhin ausgelöst

dragleave

Wenn das Element das Drop-Ziel herauszieht, wird das Dragleave-Ereignis ausgelöst

drop

Wenn das Element im Drop-Ziel abgelegt wird, lösen Sie das Drop-Ereignis aus

　[Hinweis] Das Standardverhalten des Drop-Ereignisses von Firefox besteht darin, die platzierte URL zu öffnen auf dem Abwurfziel. Damit Firefox normales Drag & Drop unterstützt, muss das Standardverhalten des Drop-Ereignisses abgebrochen werden

Standardmäßig darf das Zielelement nicht platziert werden, sodass das Drop-Ereignis nicht auftritt . Solange das Standardverhalten in den Dragover- und Dragenter-Ereignissen blockiert ist, kann es zu einem zulässigen Drop-Ziel werden und das Auftreten von Drop-Ereignissen ermöglichen. An diesem Punkt ändert sich der Cursor in ein Symbol, das die Platzierung von

<div id="test" draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目标</div>
<script>
var timer,i=0;
var timer1,i1=0;
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(){
this.style.backgroundColor = &#39;lightgreen&#39;;
this.innerHTML = &#39;开始拖动&#39;;
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = &#39;元素已被拖动&#39; + ++i + &#39;秒&#39;;
},1000);
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;i =0;
this.innerHTML = &#39;结束拖动&#39;;
this.style.backgroundColor = &#39;pink&#39;;
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
if(timer1) return;
timer1 = setInterval(function(){
target.innerHTML = &#39;元素已进入&#39; + (++i1) + &#39;秒&#39;;
},1000);
}
target.ondragleave = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

dataTransfer-Objekt

ermöglicht, um Drag zu implementieren und Drop-Operationen Der Datenaustausch führt das dataTransfer-Objekt ein, das ein Attribut des Ereignisobjekts ist und zum Übertragen von Daten im String-Format vom gezogenen Element zum Platzierungsziel verwendet wird

Das dataTransfer-Objekt verfügt über zwei Hauptobjekte Methoden: getData () und setData()

　getData() kann den von setData() gespeicherten Wert abrufen. Der erste Parameter der setData()-Methode, der auch der einzige Parameter der getData()-Methode ist, ist eine Zeichenfolge, die den gespeicherten Datentyp angibt. Der Wert ist „Text“ oder „URL“

IE definiert nur zwei gültige Datentypen: „Text“ und „URL“, während HTML5 dies erweitert, um die Angabe verschiedener MIME-Typen zu ermöglichen. Unter Berücksichtigung der Abwärtskompatibilität unterstützt HTML5 auch „text“ und „URL“, diese beiden Typen werden jedoch „text/plain“ und „text/uri-list“ zugeordnet.

Tatsächlich Das dataTransfer-Objekt kann für jeden MIME-Typ einen Wert speichern. Mit anderen Worten, es ist kein Problem, gleichzeitig einen Text und eine URL in diesem Objekt zu speichern

　[Hinweis] Die im dataTransfer-Objekt gespeicherten Daten können nur im Drop gelesen werden Ereignishandler

Beim Ziehen des Texts im Textfeld ruft der Browser die setData()-Methode auf, um den gezogenen Text im dataTransfer-Objekt im „Text“-Format zu speichern. Ebenso wird beim Ziehen und Ablegen eines Links oder Bildes die Methode setData() aufgerufen und die URL gespeichert. Wenn diese Elemente dann per Drag & Drop in das Ablageziel gezogen werden, können die Daten über getData()

<div>请将从这堆内容不同乱七八糟的文字中挑选一些移动到拖放目标中</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = &#39;落入目标区域的文字为:&#39; + e.dataTransfer.getData(&#39;text&#39;);
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

gelesen werden. Natürlich können Sie das auch Verwenden Sie Dragstart. Rufen Sie setData() im Event-Handler auf, um die Daten, die Sie für die zukünftige Verwendung übertragen möchten, manuell zu speichern

<div id="test" draggable="true" data-value="这是一个秘密" style="height:30px;width:100px;background:pink;">拖动源</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(e){
e = e || event;
e.dataTransfer.setData(&#39;text&#39;,test.getAttribute(&#39;data-value&#39;));
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = &#39;落入目标区域的文字为:&#39; + e.dataTransfer.getData(&#39;text&#39;);
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>
   
改变光标
　　利用dataTransfer对象，不仅可以传输数据，还能通过它来确定被拖动的元素以及作为放罝目标的元素能够接收什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed
　　实际上，这两个属性并没有什么用，只是拖动源在拖动目标上移动时，改变不同的光标而已(但是，有一种情况除外)
dropEffect
　　dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值
　　"none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值(此时，将无法触发drop事件)
　　"move":应该把拖动的元素移动到放置目标
　　"copy":应该把拖动的元素复制到放置目标
　　"link":表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL)
　　在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号
　　[注意]必须在ondragover事件处理程序中针对放置目标来设置dropEffect属性
effectAllowed
　　dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect
　　effectAllowed属性可能的值如下
　　"uninitialized":没有给被拖动的元素设置任何放置行为
　　"none":被拖动的元素不能有任何行为　
　"copy":只允许值为"copy"的dropEffect
　　"link"只允许值为"link"的dropEffect
　　"move":只允许值为"move"的dropEffect
　　"copyLink":允许值为"copy"和"link"的dropEffect
　　"copyMove":允许值为"copy"和"move"的dropEffect
　　"linkMove":允许值为"link"和"move"的dropEffect
　"all":允许任意dropEffect
　　[注意]必须在ondragstart事件处理程序中设置effectAllowed属性

<div id="test" draggable="true" style="height:30px;width:100px;background:pink;display:inline-block;">拖放源</div>
<br>
<div id="target1" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(none)拖放目标</div>
<div id="target2" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(move)拖放目标</div>
<div id="target3" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(copy)拖放目标</div>
<div id="target4" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(link)拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown =function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(e){
e = e || event;
//兼容firefox浏览器
e.dataTransfer.setData(&#39;text&#39;,&#39;&#39;);
e.dataTransfer.effectAllowed = &#39;all&#39;;
}
target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}this.style.background = &#39;red&#39;;
}
target1.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;none&#39;;
}
target2.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;move&#39;;
}
target3.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;copy&#39;;
}
target4.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;link&#39;;
}
target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){
e = e || event; this.style.backgroundColor = &#39;lightblue&#39;;
}
target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

Das Obige ist das vom Herausgeber eingeführte native JavaScript. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Für ein tieferes Verständnis des nativen JavaScript-Drag & Drop beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!