拖放（交換，刪除）JavaScript

我想創建一個應用程序來練習和理解拖放。拖放（交換，刪除）JavaScript

我的應用程序有一個拖放區域，拖動項目的工具欄和刪除項目的拖放區域。

無法做的是在放置區中的兩個項目之間交換位置。當我嘗試通過拖動一個來改變位置時，另一個拖放會在前一個元素上執行。

這是我的申請code pen link。

<fieldset> 
 
    <legend>Drop Zone</legend> 
 
    <div id="dz" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
</fieldset> 
 
</form> 
 
<div class="card text-xs-center"> 
 
    <div class="card-block"> 
 
    <div id="textbox"> 
 
     <div id="dti1" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti1">Text Input</label> 
 
     <input type="text" class="form-control" id="ti1" placeholder="text"> 
 
     </div> 
 
     <div id="dti2" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti2">Password</label> 
 
     <input type="password" class="form-control" id="ti2" placeholder="Password"> 
 
     </div> 
 
     <div id="dti3" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti3">Example textarea</label> 
 
     <textarea class="form-control" id="ti3" rows="3"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="delete" ondragover="allowDrop(event)" ondrop="del(event)">Drop here to delete </div> 
 
</div>

這一形象會給你我在說什麼

來源

2016-12-29 Mill3r

不允許在放置區本身重複放置功能，因爲這允許重複表單元素條目，這是造成問題的原因。 –

我真的不明白你的解決方案。如果我不允許放置區中的放置功能，那麼它根本不起作用。 – Mill3r

允許放置功能，但不能放在已經在該區域的物品上。 –

爲了防止其他元素內下降的一個想法，你可以添加的檢查id：

function allowDrop(e) { 
    'use strict'; 
    if (e.target.id === 'dz') { 
     e.preventDefault(); 
    } 
}

這將允許僅丟棄到主容器

來源

2016-12-29 09:24:39

謝謝..這有幫助。 – Mill3r

不客氣，實施交換並不是那麼容易，嘗試自己，並在這裏鏈接問題，如果你有它們。看看[這個庫]（http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple。）另外，考慮接受答案，如果它回答你的問題 –

拖放（交換，刪除）JavaScript

回答

相關問題