ホームページ > 記事 > ウェブフロントエンド > JavaScript ネイティブのドラッグ アンド ドロップについての深い理解について話します。
JavaScript ネイティブのドラッグ アンド ドロップについての深い理解について話します。
- 高洛峰オリジナル
- 2017-01-18 13:31:351029ブラウズ
前の言葉
ドラッグ アンド ドロップ (DnD) は、実際にはドラッグ アンド ドロップの 2 つのアクションです。したがって、これには 2 つの要素が含まれます。 1 つはドラッグ アンド ドロップ ソースと呼ばれるドラッグされた要素で、もう 1 つはドラッグ アンド ドロップ ターゲットと呼ばれるドロップされるターゲットです。この記事ではネイティブドラッグアンドドロップをこの2つの概念に分けて詳しく紹介していきます
ドラッグアンドドロップソース
ドラッグアンドドロップソースとはどのような要素なのでしょうか？
HTML5 は、すべての HTML 要素に対してドラッグ可能属性を指定し、要素をドラッグできるかどうかを示します
画像とリンクのドラッグ可能属性は自動的に true に設定されますが、他の要素のこの属性のデフォルト値は false です
[注意] 有効にするには、draggable='true' を設定する必要があります。draggable を設定しただけでは機能しません。
デフォルトでは、テキストは選択されている場合にのみドラッグできますが、画像とリンクはいつでもドラッグできます。他の要素はドラッグ アンド ドロップできません
<input value="文字可拖动"> <img alt="图像可拖动" src="http://files.cnblogs.com/files/xiaohuochai/zan.gif"> <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 = 'lightgreen';
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = i++;
},100)
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;
this.style.backgroundColor = 'pink';
}
</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 = 'lightgreen';
this.innerHTML = '开始拖动';
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = '元素已被拖动' + ++i + '秒';
},1000);
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;i =0;
this.innerHTML = '结束拖动';
this.style.backgroundColor = 'pink';
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = '有元素进入目标区域';
this.style.background = 'red';
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
if(timer1) return;
timer1 = setInterval(function(){
target.innerHTML = '元素已进入' + (++i1) + '秒';
},1000);
}
target.ondragleave = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = '元素已离开目标区域';
this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = '元素已落在目标区域';
this.style.backgroundColor = 'orange';
}
</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 = '有元素进入目标区域';
this.style.background = 'red';
}
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 = '元素已离开目标区域';
this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text');
this.innerHTML = '元素已落在目标区域';
this.style.backgroundColor = 'orange';
}
</script>rreee
上記は編集者によって紹介された JavaScript ネイティブのドラッグ アンド ドロップです。ご質問がございましたら、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。
JavaScript ネイティブのドラッグ アンド ドロップをさらに詳しく理解するには、PHP 中国語 Web サイトの関連記事に注目してください。