JavaScript HTML5でドラッグ機能を簡単に実装するテクニックを詳しく解説-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-03-24 15:08:54

オリジナル

1144 人が閲覧しました

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

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

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

ドラッグターゲットで所有されるイベント
dragenter (ドラッグされた要素がドロップターゲットに入ったときにトリガーされます)

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

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

ドラッグオブジェクトになる方法
HTMLでは、デフォルトでimg要素がドラッグでき、その他の要素もドラッグできますドラッグできるようにするには、draggable=true に設定する必要があります。
```
<p draggable="true"></p>
```
ログイン後にコピー
ドラッグターゲットになる方法

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

droptarget.addEventListener(&#39;dragenter&#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;dragover&#39;, function(event) {
  event.preventDefault();
});

ログイン後にコピー

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

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

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
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);
});

ログイン後にコピー

完全なコード





  
  HTML5 拖拽




  <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 をドラッグオブジェクトとして使用する場合、この問題は発生しません。

最終コード





  
  HTML5 拖拽
  




  
  
  

<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 サイトの他の関連記事を参照してください。