2

例えば：

<script type="text/javascript">
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
  }

  function drop(ev) {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" width="75" height="75" />

x.pngファイルを div にドラッグ アンド ドロップしたいのですがx.png、そうすると div に移動してしまいます。x.pngどうすればそれを達成できx.pngますか?

4

2 に答える 2

10

cloneNode(true) メソッドを使用して必要な DOM 要素を複製することで、これを行うことができます。

<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
 }
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();
}
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" 
    ondragstart="drag(event)" width="75" height="75" />
于 2013-11-05T06:44:44.613 に答える
4

ここに示す例に固執します: http://www.w3schools.com/html/html5_draganddrop.asp

次のドキュメントがあるとします。

<!DOCTYPE HTML>
<html>
 <head>
  <script>
    <!-- script comes in the text below -->
  </script>
 </head>
 <body>

  <div id="div1" ondrop="drop(event)"
  ondragover="allowDrop(event)"></div>

  <img id="drag1" src="img_logo.gif" draggable="true"
  ondragstart="drag(event)" width="336" height="69">

 </body>
</html>

通常のドラッグ＆ドロップ

通常のドラッグ アンド ドロップには、それぞれの要素に次のような機能が割り当てられています。

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");
  ev.target.appendChild(document.getElementById(data));
}

ドラッグ＆コピー

一方、drop 関数を変更して、DOM 要素を移動する代わりにコピーする必要があります。

//other functions stay the same

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data).cloneNode(true));
}

このページを試してください: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
そして、 に a を追加.cloneNode(true)しgetElementById(data)ます。

ファイルマネージャーで次のようなことを行うこともできます: Ctrl-キーで移動からコピーに切り替えます:

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  if (ev.ctrlKey)
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
  else
    ev.target.appendChild(document.getElementById(data));
}
于 2013-11-05T06:56:14.713 に答える