将多个div拖放为唯一

Question

嗨，我正在拖放工作，但我停止了这个问题。

我有2列，我想将div从源列拖到目标列。问题是这些源div在每个源容器中都被重新放置，当我移动它时我需要它（例如div＃36406），相同ID的相邻源容器中的所有其他div都消失了源列。

编辑1：

＆＃13;

＆＃13;

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

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

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

您好我在下面发布了一个工作示例。我将每个div的data-id属性设置为其ID号。我在这个例子中使用了jQuery（希望没问题）。当拖动事件开始时，将调用dragStart()函数，它会搜索具有匹配data-id属性的每个div，并将不透明度设置为0. dragStop()函数将不透明度设置为如果您有任何进一步的问题，请告诉我。）

 function dragStart(ev) {
	let id = ev.target.getAttribute("data-id");
  $("[data-id=" + id + "]").not(ev.target).css("opacity", 0);
 }
 
 function dragStop(ev) {
 	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>