Tatsächlicher HTML5-Kampf und Analyse des nativen Drag-and-Drop (eine Übersicht über den Drag-and-Drop-Verlauf)

Wenn ich Drag & Drop erwähne, denke ich an einen sehr interessanten Effekt während des JavaScript-Trainings, nämlich Drag & Drop. Sie können ein Objekt mit der Maus an eine beliebige Stelle ziehen.

Der erste Browser mit JavaScript-Drag-and-Drop-Funktionalität war IE4. Damals gab es auf der Webseite nur zwei Arten von Objekten, die per Drag-and-Drop verschoben werden konnten: Grafiken und bestimmte Texte. Wenn Sie ein Bild ziehen, platzieren Sie die Maus auf dem Bild und halten Sie die Maustaste gedrückt, um zu ziehen. Beim Ziehen von Text müssen Sie zuerst den Text auswählen und dann den ausgewählten Text wie ein Bild ziehen. In IE4 ist das einzig gültige Ziel zum Platzieren von gezogenem Text ein Textfeld. Mit IE5.5 geht es noch einen Schritt weiter und ermöglicht das Ziehen und Ablegen jedes Elements auf der Webseite (IE6 und höher unterstützen diese Funktionen ebenfalls). Mit der schrittweisen Aktualisierung der Browser und der Geburt von IE7IE8 und anderen Browsern kann alles auf der Webseite per Drag & Drop verschoben werden, die Implementierung erfolgt jedoch nur über JavaScript-Programme. Im Folgenden finden Sie ein kleines Beispiel für die Drag-and-Drop-Implementierung, wenn kein HTML5 vorhanden ist.

　HTML-Code

<p id="p1" style="width:100px; height:100px; background:red; position:absolute;">梦龙小站</p>

　 JavaScript-Code

window.onload = function(){
	var op = document.getElementById('p1');
	var disX = 0;
	var disY = 0;
	
	op.onmousedown = function(ev){
		var ev = ev || window.event;
		disX = ev.clientX - op.offsetLeft;
		disY = ev.clientY - op.offsetTop;
		
		//在IE下，如果选中元素拖拽就会有问题 : IE设置全局捕获：setCapture 释放全局捕获：releaseCapture
		if(op.setCapture){
			op.setCapture();
		}
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			op.style.left = ev.clientX - disX + 'px';
			op.style.top = ev.clientY - disY + 'px';
		};
		
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
			if(op.releaseCapture){
				op.releaseCapture();
			}
		};

		//在标准浏览器下如果拖拽一个空的标签，就会有问题 : return false
		//在标准浏览器下拖拽图片会有问题：return false
		return false;
	};
	
};

　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;}

　 Bis zum Aufkommen von HTML5. HTML5 ist eine Drag-and-Drop-Spezifikation, die auf dem IE basiert. Zu den Browsern, die natives Drag & Drop unterstützen, gehören: Chrome, Safari 3+ und Firefox 3.5+.

Drag & Drop in HTML5 kann perfekt zwischen Fenstern, zwischen Frames und sogar zwischen Anwendungen gezogen werden. Die Browserunterstützung für Drag & Drop erleichtert diese Funktionalität.

Tatsächlicher HTML5-Kampf und Analyse von nativem Drag (1) – ein Überblick über den Drag-and-Drop-Verlauf, das ist alles für alle. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!