ドラッグイベント

ドラッグイベントを通じて、さまざまなもののドラッグを制御できます。どの要素またはどこでドラッグイベントが発生するかが最も重要です。一部のイベントはドラッグされた要素で発生し、一部のイベントはドロップターゲットで発生します。要素がドラッグされると、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(&#39;li&#39;);
	var op = document.getElementById(&#39;p1&#39;);
	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)!