HTML5の実戦とネイティブドラッグの解析（2つのドラッグイベントdragstart、drag、dragend）

ドラッグイベント

ドラッグイベントを通じて、さまざまなもののドラッグを制御できます。どの要素またはどこでドラッグ イベントが発生するかが最も重要です。一部のイベントはドラッグされた要素で発生し、一部のイベントはドロップ ターゲットで発生します。要素がドラッグされると、dragstart イベント、drag イベント、dragend イベントがトリガーされます。

マウスボタンを押してマウスを動かし始めると、ドラッグされた要素でdragstartイベントがトリガーされます。この時点で、カーソルが「配置できません」記号 (円の中にバックスラッシュがある) に変わり、要素を独自のドアに配置できないことを示します。ドラッグが開始されると、ondragstart イベント ハンドラーを通じて JavaScript コードを実行できます。

dragstart イベントがトリガーされると、すぐにドラッグ イベントがトリガーされ、要素がドラッグされている間、ドラッグ イベントはトリガーされ続けます。このイベントは、mousemove イベントおよび touchmove イベントに似ています。ドラッグが停止すると (要素が有効なドロップ ターゲットに配置されたか無効なドロップ ターゲットに配置されたかに関係なく)、dragend イベントが発生します。

上記の 3 つのイベントのターゲットは、すべてドラッグされた要素によってトリガーされます。デフォルトでは、ブラウザはドラッグ中にドラッグされた要素の外観を変更しません。ただし、自分で変更することもできます。ただし、ほとんどのブラウザは、ドラッグされている要素の半透明のコピーを作成し、常にカーソルに追従します。要素が有効なドロップ ターゲットにドラッグされると、dragenter イベント、dragover イベント、dragleave またはdrop イベントがトリガーされます。

要素がドロップターゲットにドラッグされている限り、dragenter イベント (mouseover イベントと同様) がトリガーされます。これにドラッグオーバー イベントが続き、ドラッグされた要素がドロップ ターゲットの範囲内でまだ移動している場合、ドラッグオーバー イベントが継続的にトリガーされます。要素がドロップ ターゲットからドラッグされると、dragover イベントは発生しなくなりますが、dragleave イベントがトリガーされます (mouseout イベントと同様)。要素がドロップ ターゲットに配置されると、dragleave イベントの代わりに Drop イベントがトリガーされます。ドラッグエンター イベント、ドラッグオーバー イベント、およびドラッグリーブまたはドロップ イベントのターゲットは、すべてドロップ ターゲットとして機能する要素です。

カスタマイズされた配置ターゲット

無効な配置ターゲットを越えて要素をドラッグすると、配置できないことを示す特別なマウス ジェスチャ (円の中のバックスラッシュ) が表示されます。すべての要素はドロップ ターゲット イベントをサポートしていますが、これらの要素はデフォルトではドロップできません。ドロップが許可されていない要素を越えて要素がドラッグされた場合、ユーザーが何をしても、ドロップ イベントは発生しません。ただし、dragenter イベントとドラッグオーバー イベントのデフォルトの動作をオーバーライドすることで、任意の要素を有効なドロップ ターゲットにすることができます。

デフォルトの動作をオーバーライドすると、要素をドロップターゲットにドラッグすると、カーソルが配置を可能にするシンボルに変わることがわかります。 Firefox 3.5 以降では、ドロップ イベントのデフォルトの動作は、ドロップ ターゲットにドロップされた URL を開きます。画像をドロップ ターゲットにドラッグすると、ページは画像ファイルにリダイレクトされます。テキストをドロップ ターゲットにドラッグ アンド ドロップすると、無効な URL エラーが発生します。したがって、Firefox が通常のドラッグ アンド ドロップをサポートするには、ドロップ イベントのデフォルトの動作をキャンセルし、ドラッグされた要素の URL が開かれないようにする必要があります。小さな例は次のとおりです

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

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

上記は内容です、その他の関連コンテンツについてはPHPに注意してください 中国のWebサイト（www. php.cn)!