HTML5の実戦とネイティブドラッグ＆ドロップの分析（ドラッグ＆ドロップの歴史の概要）

ドラッグ アンド ドロップについて言及するとき、JavaScript のトレーニング中に非常に興味深い効果であるドラッグ アンド ドロップを思い出します。マウスを使用して、オブジェクトを任意の場所にドラッグできます。

JavaScript のドラッグ アンド ドロップ機能を備えた最初のブラウザは IE4 ブラウザです。当時、Web ページ上でドラッグ アンド ドロップできるオブジェクトは、グラフィックと特定のテキストの 2 種類だけでした。画像をドラッグする場合は、画像上にマウスを置き、マウスを押したままドラッグします。テキストをドラッグするときは、まずテキストを選択し、次に選択したテキストを画像のようにドラッグする必要があります。 IE4 では、ドラッグされたテキストを配置するための唯一の有効なターゲットはテキスト ボックスです。 IE5.5 ではさらに一歩進んで、Web ページ内の任意の要素をドラッグ アンド ドロップできるようになりました (IE6 以降でもこれらの機能がサポートされています)。ブラウザーが段階的に更新され、IE7IE8 やその他のブラウザーが誕生すると、Web ページ上のすべてのものをドラッグ アンド ドロップできるようになりましたが、それは JavaScript プログラムを通じてのみ実装されます。以下は、HTML5 がない場合のドラッグ アンド ドロップ実装の小さな例です。

HTMLコード

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

JavaScriptコード

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

HTML5が登場するまで。 HTML5 は IE をベースにしたドラッグ アンド ドロップ仕様です。ネイティブ ドラッグ アンド ドロップをサポートするブラウザには、Chrome、Safari 3 以降、Firefox 3.5 以降が含まれます。

HTML5のドラッグアンドドロップは、ウィンドウ間、フレーム間、さらにはアプリケーション間でも完璧にドラッグできます。ブラウザのドラッグ アンド ドロップのサポートにより、この機能が容易になります。

HTML5の実戦とネイティブドラッグの分析(1) - ドラッグ＆ドロップの歴史を概観する、以上です。関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。