HTML5のドラッグ＆ドロップコピー機能の実装-H5 チュートリアル-php.cn

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

高洛峰

リリース： 2017-02-17 17:11:19

オリジナル

2284 人が閲覧しました

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

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

ブラウザのサポート

Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5

v1.0 コード部分

<!DOCTYPE html>
<html>
<head>
  <styletype="text/css">
    #p1 {
      width: 700px;
      height: 120px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
 
    #drag1 {
      cursor:pointer;
    }
  </style>
  <scripttype="text/javascript">
    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);
    }
  </script>
</head>
<body>
  <p>请把 Windows Azure 的图片拖放到矩形中：</p>
  <pid="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/>
</body>
</html>

ログイン後にコピー

コード分析

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

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

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

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

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

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