如何拖放一個字段上的多個元素

Question

我想實現一個讓我拖放元素列表到矩陣中的函數。

我現在正在嘗試的第一步是簡單地將一個元素拖入一個區域。它在第一個元素上執行，但第二個執行，而其他的不執行。

代碼

我的下一個的JavaScript代碼：

var dragSrcEl = null; 

function dragStart(event) { 
    event.dataTransfer.setData("Text", event.target.id); 
} 

function dragEnter(event) { 
    if (event.target.className == "droptarget") { 
     document.getElementById("demo").innerHTML = "Entered the dropzone"; 
     event.target.style.border = "3px dotted red"; 
    } 
} 

function dragLeave(event) { 
    if (event.target.className == "droptarget") { 
     document.getElementById("demo").innerHTML = "Left the dropzone"; 
     event.target.style.border = ""; 
    } 
} 

function allowDrop(event) { 
    event.preventDefault(); 
} 

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

而且HTML被做下一個代碼使用此：

... 
      <div class="input-group input-group-option col-xs-12" ondragstart="dragStart(event)" draggable="true" id="dragtarget"> 
       <span class="input-group-addon" id="sizing-addon2">1</span> 
       <input type="text" name="option[]" class="form-control" placeholder="Focus me"> 
       <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-align-justify"></span> 
       </span> 
      </div> 

      <div class="input-group input-group-option col-xs-12" ondragstart="dragStart(event)" draggable="true" id="dragtarget"> 
       <span class="input-group-addon" id="sizing-addon2">2</span> 
       <input type="text" name="option[]" class="form-control" placeholder="Focus me"> 
       <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-align-justify"></span> 
       </span> 
      </div> 

      <div class="input-group input-group-option col-xs-12" ondragstart="dragStart(event)" draggable="true" id="dragtarget"> 
       <span class="input-group-addon" id="sizing-addon2">3</span> 
       <input type="text" name="option[]" class="form-control" placeholder="Focus me"> 
       <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-align-justify"></span> 
       </span> 
      </div> 
... 

我怎麼能拖到並多掉一個元素？

JSFiddle

Answer 1

請試試這個：下面這裏

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    if (ev.target.childNodes.length === 0) { 
     ev.target.appendChild(document.getElementById(data)); 
    }  
} 

演示：

DEMO

DEMO 1