Move cards between divs with javascript

Question

Move cards between divs with javascript

Navigation

#1 by (0 votes)

0

How can I identify which card is in which div can execute the code to see my result. I need to move a card to identify me where div is found in the first or second.

var dropTarget = document.querySelector(".wrapper");
var draggables = document.querySelectorAll(".task");

for(let i = 0; i < draggables.length; i++) {
  draggables[i].addEventListener("dragstart", function (ev) {
     ev.dataTransfer.setData("srcId", ev.target.id);
  });
}

dropTarget.addEventListener('dragover', function(ev) {
  ev.preventDefault();
});

dropTarget.addEventListener('drop', function(ev) {
  ev.preventDefault();
  let target = ev.target;
  let droppable  = target.classList.contains('box');
  let srcId = ev.dataTransfer.getData("srcId");
  
  if (droppable) {
    ev.target.appendChild(document.getElementById(srcId));
  }
});

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  height: 90vh;
}

.task {
  background-color: pink;
  color: black;
  padding: 5px;
  margin: 4px;
}

<div class="main">
    <div class="col-xs-4">
        <div class="wrapper">
            <div class="box">
            <div id="task1" class="task" draggable="true">
                arrastrame
            </div>
            <div id="task2" class="task" draggable="true">
                arrastrame
            </div>
            <div id="task3" class="task" draggable="true">
                arrastrame
            </div>
            </div>
            
            <div class="box">
        </div>
    </div>
</div>

javascript

asked by DoubleM 27.05.2018 в 08:23

source

1 answer

Datepicker does not display when I load data with a C # search, Bootstrap. ASP NET I need to send POST information to a page and redirect me to another

score 0 · Answer 1

The simplest thing is probably to assign an identifier to each of the lox boxes, and by parentNode get your id.

The% co_of concrete% that you are moving can also be obtained from the event.

var dropTarget = document.querySelector(".wrapper");
var draggables = document.querySelectorAll(".task");

for(let i = 0; i < draggables.length; i++) {
  draggables[i].addEventListener("dragstart", function (ev) {
     ev.dataTransfer.setData("srcId", ev.target.id);
     console.log(ev.target.parentNode.id)
     console.log(ev.target.id)
  });
}

dropTarget.addEventListener('dragover', function(ev) {
  ev.preventDefault();
});

dropTarget.addEventListener('drop', function(ev) {
  ev.preventDefault();
  let target = ev.target;
  let droppable  = target.classList.contains('box');
  let srcId = ev.dataTransfer.getData("srcId");
  
  if (droppable) {
    ev.target.appendChild(document.getElementById(srcId));
  }
});

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  height: 90vh;
}

.task {
  background-color: pink;
  color: black;
  padding: 5px;
  margin: 4px;
}

<div class="main">
    <div class="col-xs-4">
        <div class="wrapper">
            <div id="org-box" class="box">
                <div id="task1" class="task" draggable="true">
                    arrastrame
                 </div>
                 <div id="task2" class="task" draggable="true">
                     arrastrame
                 </div>
                 <div id="task3" class="task" draggable="true">
                     arrastrame
                 </div>
            </div>
            
            <div id="target-box" class="box">
            </div>
    </div>
</div>

Another option would be that instead of putting a listener to each .task you would put it only to .task . In this way .box would be the element of the sun on which the event starts and evt.target would be the evt.currentTarget element to which you added the listener.