JavaScript HTML5でドラッグ機能を簡単に実装するテクニックを詳しく解説

この記事では、ドラッグ機能を簡単に実現するための javascript html5 を紹介します。興味のある方は参考にしてください。

ドラッグ アンド ドロップ (ドラッグ アンド ドロップ) は html5 標準コンポーネントであり、以下から説明します。 5 つの側面、つまり、ドラッグ オブジェクトになる方法、ドラッグ ターゲットになる方法、ドラッグ オブジェクトが所有する イベント、ドラッグ ターゲットが所有するイベント、およびドラッグ アンド ドロップ オブジェクト間で情報を転送する方法です。 objectsオブジェクトのドラッグによって所有されているイベント

dragstart（オブジェクトがドラッグされたときにトリガー）

• ドラッグターゲットで所有されるイベント

• 
  dragenter (ドラッグされた要素がドロップターゲットに入ったときにトリガーされます)

dragover (ドラッグされた要素がドロップターゲット内で移動したときに) トリガーされます。マウスオーバー)

drop (ドラッグ要素がドロップターゲットに配置されたときにトリガーされます)

• ドラッグオブジェクトになる方法

• HTMLでは、デフォルトでimg要素がドラッグでき、その他の要素もドラッグできますドラッグできるようにするには、draggable=true に設定する必要があります。

  <p draggable="true"></p>

  
  
  ドラッグターゲットになる方法

HTMLでは、要素はデフォルトではドロップターゲットになることができず、drapenterイベントとdrapoverイベントのデフォルト動作を無効にした場合にのみドラッグアンドドロップターゲットと呼ぶことができます。

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

ドラッグ アンド ドロップ オブジェクト間で情報を転送する方法

イベントには dataTransferobject があり、これには 2 つの共通メソッド setData() と getData() があり、ドラッグ アンド ドロップ情報を保存し、ドラッグ アンド ドロップ情報を取得するために使用されます。と情報をそれぞれドロップします。このうち、setData() はドラッグ イベントの開始時、つまり、dragstart イベントが設定されたときにのみ設定でき、getData() は通常、ドロップ イベントがトリガーされたときに取得されます。

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

完全なコード

  
  



  <p draggable="true"></p>
  

    
  
  


<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

問題があります

Firefoxブラウザ

JavaScriptの高度なプログラミングによると、デフォルトではドロップイベントで画像をドラッグアンドドロップして新しいウィンドウを開くことは禁止されています。 、問題は解決しません。

解決策:

画像を p の背景画像として使用し、 p をドラッグ オブジェクトとして使用する場合、この問題は発生しません。

最終コード

  
  
  



  

  
  


<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

以上がJavaScript HTML5でドラッグ機能を簡単に実装するテクニックを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。