JavaScript ネイティブのドラッグ アンド ドロップについての深い理解について話します。

前の言葉

ドラッグ アンド ドロップ (DnD) は、実際にはドラッグ アンド ドロップの 2 つのアクションです。したがって、これには 2 つの要素が含まれます。 1 つはドラッグ アンド ドロップ ソースと呼ばれるドラッグされた要素で、もう 1 つはドラッグ アンド ドロップ ターゲットと呼ばれるドロップされるターゲットです。この記事ではネイティブドラッグアンドドロップをこの2つの概念に分けて詳しく紹介していきます

ドラッグアンドドロップソース

ドラッグアンドドロップソースとはどのような要素なのでしょうか？

HTML5 は、すべての HTML 要素に対してドラッグ可能属性を指定し、要素をドラッグできるかどうかを示します

画像とリンクのドラッグ可能属性は自動的に true に設定されますが、他の要素のこの属性のデフォルト値は false です

[注意] 有効にするには、draggable='true' を設定する必要があります。draggable を設定しただけでは機能しません。

デフォルトでは、テキストは選択されている場合にのみドラッグできますが、画像とリンクはいつでもドラッグできます。他の要素はドラッグ アンド ドロップできません

<input value="文字可拖动">
<img src="/static/imghwm/default1.png"  data-src="http://files.cnblogs.com/files/xiaohuochai/zan.gif"  class="lazy"  alt="图像可拖动" >
<a href="#">链接可拖动</a>
<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>

要素に draggable 属性が設定されている場合、通常の要素もドラッグできます

<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

互換性があります

IE9 ブラウザは draggable 属性をサポートしていませんが、それは可能ですマウスダウンイベントを通じてドラッグされる ハンドラーはドラッグ効果を達成するためにdragDrop()メソッドを呼び出します

<div id="test" style="height:30px;width:300px;background:pink;"></div>
<script>
test.onmousedown = function(){
this.dragDrop();
}
</script>

[注]Firefoxにdraggable属性をサポートさせたい場合は、ondragstartイベントハンドラーを追加し、setData()を使用する必要がありますdataTransfer オブジェクトのメソッドを使用してエフェクトを開始します

ドラッグ アンド ドロップ イベント

ドラッグ アンド ドロップ ソースには 3 つのドラッグ アンド ドロップ イベントが含まれます。ソースをドラッグ アンド ドロップすると、dragstart、drag、dragend の 3 つのイベントが順番にトリガーされます

dragstart

マウス ボタンを押してマウスを動かし始めると、ドラッグされた要素で dragstart イベントがトリガーされます。このとき、カーソルは「配置できません」記号 (円の中にバックスラッシュがあります) に変わります。これは、要素をそれ自体に配置できないことを意味します

drag

ドラッグスタートイベントがトリガーされた後、ドラッグイベントはただちにトリガーされ、要素内でこのイベントはドラッグされている間トリガーされ続けます

dragend

ドラッグが停止すると (要素が有効な配置ターゲットに配置されているか、無効な配置ターゲットに配置されているかに関係なく)、ドラッグエンドイベントがトリガーされます

<div id="test" draggable="true" style="height:30px;width:100px;background:pink;">0</div>
<script>
var timer,i=0;
test.ondragstart = function(){
this.style.backgroundColor = &#39;lightgreen&#39;;
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = i++;
},100)
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;
this.style.backgroundColor = &#39;pink&#39;;
}
</script>

ドラッグターゲット

ドラッグターゲットとは、ドラッグされた要素がマウスボタンを放したときに配置されるターゲットを指します

ドラッグソースがドラッグターゲットにドラッグされると、dragenterそして、dragover が順番にトリガーされます そして、dragleave または Drop の 4 つのイベント

dragenter

要素がドロップターゲットにドラッグされている限り、dragenter イベントがトリガーされます

dragover

ドラッグされた要素がドロップ ターゲットの範囲内で移動し、連続的にドラッグオーバー イベントをトリガーします

dragleave

要素がドロップ ターゲットの外にドラッグされると、dragleave イベントがトリガーされます

drop

要素が配置された場合ドロップターゲットを指定すると、ドロップイベントがトリガーされます

[注意] Firefox ブラウジング ブラウザのドロップイベントのデフォルトの動作は、ドロップターゲットに配置された URL を開くことです。 Firefox が通常のドラッグ アンド ドロップをサポートするには、ドロップ イベントのデフォルトの動作をキャンセルする必要があります。デフォルトでは、ターゲット要素の配置は許可されていないため、ドロップ イベントは発生しません。デフォルトの動作がドラッグオーバーイベントとドラッグエンターイベントでブロックされている限り、許可されたドロップターゲットになり、ドロップイベントの発生を許可できます。このとき、カーソルは配置可能なシンボルになります

<div id="test" draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目标</div>
<script>
var timer,i=0;
var timer1,i1=0;
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(){
this.style.backgroundColor = &#39;lightgreen&#39;;
this.innerHTML = &#39;开始拖动&#39;;
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = &#39;元素已被拖动&#39; + ++i + &#39;秒&#39;;
},1000);
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;i =0;
this.innerHTML = &#39;结束拖动&#39;;
this.style.backgroundColor = &#39;pink&#39;;
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
if(timer1) return;
timer1 = setInterval(function(){
target.innerHTML = &#39;元素已进入&#39; + (++i1) + &#39;秒&#39;;
},1000);
}
target.ondragleave = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

dataTransfer オブジェクト

ドラッグアンドドロップ操作時のデ​​ータ交換を実現するために、 の属性である dataTransfer オブジェクトを導入します。 dataTransfer オブジェクトには、要素をドラッグしてドロップ ターゲットにデータを転送するために使用されます。 getData() と setData() という 2 つの主なメソッドがあり、setData() によって保存された値を取得できます。 ）。 getData() メソッドの唯一のパラメータでもある setData() メソッドの最初のパラメータは、保存されたデータの種類を示す文字列です。値は「text」または「URL」です

IE は「text」のみを定義します。 「 」と「URL」は 2 つの有効なデータ型であり、HTML5 はこれを拡張してさまざまな MIME タイプを指定できるようにします。 HTML5では下位互換性を考慮して「text」と「URL」もサポートしていますが、この2種類は「text/plain」と「text/uri-list」にマッピングされます

実際にはdataTransferオブジェクトが利用可能です各 MIME タイプは値を保持します。つまり、このオブジェクトにテキストと URL を同時に保存しても問題ありません

【注意】dataTransfer オブジェクトに保存されたデータは、drop イベントハンドラーでのみ読み込むことができます

一方テキストのドラッグ ボックス内のテキストをドラッグすると、ブラウザは setData() メソッドを呼び出して、ドラッグしたテキストを dataTransfer オブジェクトに「テキスト」形式で保存します。同様に、リンクまたは画像をドラッグ アンド ドロップすると、setData() メソッドが呼び出され、URL が保存されます。次に、これらの要素がドロップ ターゲットにドラッグ アンド ドロップされると、getData() を通じてデータを読み取ることができます。将来使用するためにデータを転送したい

<div>请将从这堆内容不同乱七八糟的文字中挑选一些移动到拖放目标中</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = &#39;落入目标区域的文字为:&#39; + e.dataTransfer.getData(&#39;text&#39;);
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

rreee

上記は編集者によって紹介された JavaScript ネイティブのドラッグ アンド ドロップです。ご質問がございましたら、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

JavaScript ネイティブのドラッグ アンド ドロップをさらに詳しく理解するには、PHP 中国語 Web サイトの関連記事に注目してください。