拖放多個div作爲唯一

嗨，我正在拖放，但我停在這個問題。拖放多個div作爲唯一

我有2列，我想拖動從源到目標列的div。問題在於這些源div在每個源容器中都會重複使用，並且當我移動它時（例如div＃36406），所有其他源在相鄰源容器中使用相同的ID在源列中消失。

編輯1：

function drag(ev) { 
 
      ev.dataTransfer.setData("text", ev.target.className); 
 
     } 
 

 
     function drop(ev) { 
 
     \t debugger; 
 
      ev.preventDefault(); 
 
      var data = ev.dataTransfer.getData("text"); 
 
      ev.target.appendChild(document.getElementById(data)); 
 
     }

<div style="height:50px; width:50px; border: 1px solid blue; margin-left:40%" ondrop="drop(event)" ondragover="allowDrop(event)"> DROP HERE'</div> <!-- Target --> 
 

 

 
<div class="btn btn-warning '+parcelas[j].idlancamento+'" draggable="true" style="cursor:move" ondragstart="drag(event)"> 
 
SOURCE 
 
</div> <!-- source -->

來源

2017-06-22 ikk1

，你可以發佈你目前的JS代碼？我們可以通過這種方式提供更具體的答案。我認爲一般的想法是將ID添加到每個div的類中，然後在dragstart事件觸發時隱藏所有其他div（不透明度：0，display：none等）。 –

謝謝@ J.Chen的回覆。我用代碼編輯了我的帖子。你能更正確地解釋我怎樣才能用ID動態地隱藏其他人？ – ikk1

元素ID應該是唯一的。如果你有'div'元素具有相同的'id'屬性，你需要解決這個問題才能解決你的問題。 – gforce301

您好我已經貼在下面的工作示例。我將每個div的data-id屬性設置爲其ID號。我在這個例子中使用了jQuery（希望沒關係）。當拖動事件開始時，調用dragStart()函數，並且它搜索具有匹配的data-id屬性的每個div並將不透明度設置爲0. dragStop()函數將不透明度設置回1.讓我知道是否還有其他問題:)

function dragStart(ev) { 
 
\t let id = ev.target.getAttribute("data-id"); 
 
    $("[data-id=" + id + "]").not(ev.target).css("opacity", 0); 
 
} 
 
    
 
function dragStop(ev) { 
 
    \t let id = ev.target.getAttribute("data-id"); 
 
    $("[data-id=" + id + "]").not(ev.target).css("opacity", 1); 
 
} 
 

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

.btn { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    width: 90px; 
 
    height: 40px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="123" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)"> 
 
ID: 123 
 
</div> 
 

 
<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="123" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)"> 
 
ID: 123 
 
</div> 
 

 
<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="123" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)"> 
 
ID: 123 
 
</div> 
 

 
<div class="btn btn-warning '+parcelas[j].idlancamento+'" data-id="000" draggable="true" style="cursor:move" ondragstart="dragStart(event)" ondragend="dragStop(event)"> 
 
ID: 000 
 
</div>

來源

2017-06-22 20:37:30

此代碼爲我的問題@J提供了正確的方向。陳。 – ikk1

很高興能幫到你！ –

拖放多個div作爲唯一

回答

相關問題