HTML5のドラッグ＆ドロップコピー機能の実装

ドラッグ アンド ドロップは一般的な機能で、オブジェクトを取得して別の場所にドラッグします。 HTML5 では、ドラッグが標準の一部であり、任意の要素をドラッグできます。 Html5 のドラッグ アンド ドロップは非常に一般的な機能ですが、ほとんどのドラッグ アンド ドロップの場合は、Html5 のドラッグ アンド ドロップ コピー機能を実装する必要があります。通常の Html5 を使用するだけです。途中でいくつかの小さな変更を加えてください。

追記: このブログ投稿はホームページの記事ではなく、単なるメモです。

ブラウザのサポート

1. Internet Explorer 9

2. Firefox

3. Opera 12

4. Chrome

5. Safari 5

v1.0 コード部分

nbsp;html>


  <styletype>
    #p1 {
      width: 700px;
      height: 120px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
 
    #drag1 {
      cursor:pointer;
    }
  
  <scripttype>
    function allowDrop(ev) {
      ev.preventDefault();
    }
 
    function drag(ev) {
 
      ev.dataTransfer.setData("Text", ev.target.id);
    }
 
    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      var item = document.getElementById(data).cloneNode();
      ev.target.appendChild(item);
    }
  


  <p>请把 Windows Azure 的图片拖放到矩形中：</p>
  <pid>
  <br>
  <br>
  <br>
  <br>
  <br>
  <img  src="/static/imghwm/default1.png" data-src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" class="lazy" id="drag1" alt="HTML5のドラッグ＆ドロップコピー機能の実装" >

</pid></scripttype></styletype>

コード分析

実装のアイデアは、ドラッグされた要素を複製し、その複製された要素を指定された場所に appendChild() することです

Html5 のドラッグ アンド コピーを実装するためのコア コード.cloneNode()

HTML5 のドラッグ アンド コピーが完了したら、実際には、appendChild() の実行後に多くのことを完了できます。これは特定のニーズによって異なります

従来の HTML5 ドラッグ アンド ドロップを実装したいだけの場合は、var item = document.getElementById(data).cloneNode(); を削除してください。 、そして ev.target .appendChild(data);

この記事を通じて、皆さんのお役に立てれば幸いです。このサイトをよろしくお願いします。

HTML5 のドラッグ アンド ドロップ コピー機能の実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。