Tatsächlicher HTML5-Kampf und Analyse des nativen Drag (zwei Drag-Ereignisse Dragstart, Drag und Dragend)

Drag-Ereignisse

Durch Drag-Ereignisse können wir das Ziehen vieler Dinge steuern. Welches Element oder wo das Drag-Ereignis auftritt, ist am kritischsten. Einige Ereignisse werden auf dem gezogenen Element ausgelöst, andere auf dem Ablageziel. Wenn ein Element gezogen wird, werden folgende Ereignisse ausgelöst: Dragstart-Ereignis, Drag-Ereignis und Dragend-Ereignis.

Wenn Sie die Maustaste drücken und mit dem Bewegen der Maus beginnen, wird das Dragstart-Ereignis für das gezogene Element ausgelöst. Zu diesem Zeitpunkt ändert sich der Cursor in ein Symbol „Kann nicht platziert werden“ (im Kreis befindet sich ein umgekehrter Schrägstrich), was darauf hinweist, dass das Element nicht an seiner eigenen Tür platziert werden kann. Wenn das Ziehen beginnt, kann JavaScript-Code über den Ereignishandler ondragstart ausgeführt werden.

Nachdem das Dragstart-Ereignis ausgelöst wurde, wird das Drag-Ereignis sofort ausgelöst und das Drag-Ereignis wird weiterhin ausgelöst, während das Element gezogen wird. Dieses Ereignis ähnelt den Ereignissen „Mousemove“ und „Touchmove“. Wenn das Ziehen stoppt (unabhängig davon, ob das Element auf einem gültigen oder einem ungültigen Drop-Ziel platziert ist), tritt das Dragend-Ereignis auf.

Die Ziele der drei oben genannten Ereignisse werden alle durch das gezogene Element ausgelöst. Standardmäßig ändert der Browser beim Ziehen nicht das Aussehen des gezogenen Elements. Aber Sie können es selbst ändern. Allerdings erstellen die meisten Browser eine halbtransparente Kopie des gezogenen Elements, die immer dem Cursor folgt. Wenn ein Element auf ein gültiges Ablageziel gezogen wird, werden folgende Ereignisse ausgelöst: Dragenter-Ereignis, Dragover-Ereignis und Dragleave- oder Drop-Ereignis.

Solange ein Element zum Drop-Ziel gezogen wird, wird das Dragenter-Ereignis (ähnlich dem Mouseover-Ereignis) ausgelöst. Darauf folgt das Dragover-Ereignis. Wenn sich das gezogene Element noch innerhalb des Bereichs des Ablageziels bewegt, wird das Dragover-Ereignis kontinuierlich ausgelöst. Wenn das Element aus dem Drop-Ziel gezogen wird, tritt das Dragover-Ereignis nicht mehr auf, sondern das Dragleave-Ereignis wird ausgelöst (ähnlich dem Mouseout-Ereignis). Wenn das Element im Drop-Ziel platziert wird, wird das Drop-Ereignis anstelle des Dragleave-Ereignisses ausgelöst. Die Ziele von Dragenter-Ereignissen, Dragover-Ereignissen und Dragleave- oder Drop-Ereignissen sind alles Elemente, die als Drop-Ziele dienen.

Benutzerdefinierte Platzierungsziele

Wenn Sie ein Element über einige ungültige Platzierungsziele hinaus ziehen, können Sie eine spezielle Mausbewegung (einen Backslash in einem Kreis) sehen, die darauf hinweist, dass es nicht platziert werden kann. Obwohl alle Elemente Drop-Target-Ereignisse unterstützen, dürfen diese Elemente standardmäßig nicht gelöscht werden. Wenn ein Element über ein Element gezogen wird, das nicht gelöscht werden darf, tritt das Drop-Ereignis nicht ein, ganz gleich, was der Benutzer tut. Sie können jedoch jedes Element zu einem gültigen Drop-Ziel machen, indem Sie das Standardverhalten der Dragenter- und Dragover-Ereignisse überschreiben.

Nachdem Sie das Standardverhalten überschrieben haben, werden Sie feststellen, dass sich der Cursor beim Ziehen des Elements zum Ablageziel in ein Symbol ändert, das die Platzierung ermöglicht. In Firefox 3.5+ besteht das Standardverhalten eines Drop-Ereignisses darin, die URL zu öffnen, die auf dem Drop-Ziel abgelegt wurde. Wenn Sie ein Bild auf das Ablageziel ziehen, wird die Seite zur Bilddatei umgeleitet. Wenn Sie Text per Drag-and-Drop auf das Ablageziel ziehen, wird ein Fehler aufgrund einer ungültigen URL angezeigt. Damit Firefox normales Drag & Drop unterstützt, ist es daher erforderlich, das Standardverhalten des Drop-Ereignisses abzubrechen und zu verhindern, dass die URL des gezogenen Elements geöffnet wird. Ein kleines Beispiel ist wie folgt

　HTML-Code

<!-- 拖拽”梦龙小站”到”梦龙”地方的小例子 -->
<ul>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
</ul>
<p id="p1">梦龙</p>

　 CSS-Code

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}

　JavaScript-Code

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].ondragstart = function(){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
		
		/*aLi[i].ondrag = function(){ //开始与结束之间，连续触发
			
			document.title = iNow++;
			
		};*/
	}
	
	op.ondragenter = function(){  //相当于onmouseover

		this.style.background = &#39;green&#39;;
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		document.title = iNow++;
		
	};

	op.ondrop = function(ev){  //释放鼠标的时候触发

		
	
		this.style.background = &#39;red&#39;;	
	
		alert("梦龙小站，鼠标已经释放");

		ev.preventDefault();  //阻止默认事件：防止打开拖拽元素的url
	
	};
	
};

Der Oben ist der Inhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!