HTML5 Drag＆Drop：複製後に元の要素が移動する

Question

イメージをある列から別の列にドラッグして複製する基本的なスクリプトが用意されています。この機能は機能し、要素は複製されますが、要素が削除されると元の要素はDOM内の位置からコンテナの下部に移動します。

どうしたらいいですか？私は、クローンされた後、ソースイメージが定位置に留まるようにしたいと思います。

私が使用していたスクリプトは以下の通りです：

<script> 

     var clone; 
     var cloneId; 

     function dragStart(ev) { 
      ev.dataTransfer.effectsAllowed = 'copy'; 
      ev.dataTransfer.setData('text', ev.target.getAttribute('id')); 
      ev.dataTransfer.setDragImage(ev.target, 0,0); 

      clone = ev.target.cloneNode(true); 
      cloneId = ev.target.getAttribute('id'); 
      clone.className += ' ' + 'selected'; 
      ev.target.parentNode.appendChild(clone); 

      return true; 
     } 

     function dragEnter(ev) { 
      event.preventDefault(); 
      return true; 
     } 

     function dragOver(ev) { 
      return false; 
     } 

     function dragDrop(ev) { 
      var src = ev.dataTransfer.getData('text'); 
      clone.className += ' ' + 'cloned'; 
      clone.id = cloneId + '_cloned'; 
      ev.target.appendChild(document.getElementById(src)); 
      src.removeAttribute('draggable'); 
      ev.stopPropagation(); 
      return false; 
     } 

    </script> 

ドラッグ可能な要素は次のマークアップを持っている：ここでは

<img src="images/module_image-12.png" alt="Full width image" id="module_1" draggable="true" ondragstart="return dragStart(event)"> 

は問題の実例です：http://codepen.io/AlxTheRed/pen/jBLQRj見つかり

Answer 1

溶液！だから、私はむしろ、オブジェクトのIDよりも、全体のオブジェクトのIDを取得しようとしていた

ev.target.appendChild(document.getElementById(src)); 

ev.target.appendChild(document.getElementById(clone.id)); 

へ：

は、この行を変更しなければなりませんでした。これは意図したとおりに機能します。