CODEWITHSUNDEEP
javascripthtml
ikk1
ikk1

Reputation: 45

Drag and Drop multiple divs as unique

Hi i'm working with drag and drop but i stopped at this problem.

I have 2 columns and I want to drag divs from source to target column. The problem is that these source divs are reapeated in every source container and I need that when I move one (The div #36406 for example), all others divs in adjacent source containers with the same ID disappear of source column.

enter image description here

edit 1:

 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));
        }
<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 -->

Upvotes: 0

Views: 1326

Answers (1)

J. Chen
J. Chen

Reputation: 357

Hi I've posted a working example below. I set each div's data-id attribute to its ID number. I used jQuery in this example (hope that's ok). When the drag event starts, the dragStart() function is called, and it searches for each div that has a matching data-id attribute and sets the opacity to 0. The dragStop() function sets the opacity back to 1. Let me know if you have any further questions :)

 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>

Upvotes: 1

Related Questions