get all button elements dragged into div element

user_14226152 0
Viewed 26

im trying to make any button elements can be dragged into a div. in the end i want to make sure that any new button i made can be dragged into a div. i tried using querySelectorAll to grab any element, but it doesn't work like expected. right now only one button can be dragged into a div. here is the code

let button = document.querySelector('button')
let div = document.querySelector('div')

// for button
button.addEventListener('dragstart', function (ev) {
  let lol = ev.dataTransfer.setData("text", 'button');
  console.log(lol)
})


// for div
div.addEventListener('dragover', function (ev) {
    ev.preventDefault()
})
div.addEventListener('drop', function (ev) {
  ev.preventDefault()
  ev.target.appendChild(document.querySelector('button'));
})
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 3px solid #fff555;
}
  <div id="div1"></div><br>
    <button draggable="true">button one</button>
    <button draggable="true">button two</button>

drag-and-drop javascript
1 Answers

You do need use querySelectorAll, and use forEach on the returned NodeList to attach the event handler to each button.

dataTransfer is then set with the appropriate id, which need to be added in the HTML.

This property is then read back in the drop event handler.

let buttons = document.querySelectorAll('button')
let div = document.querySelector('div')

// for button
buttons.forEach(button=>button.addEventListener('dragstart', function (ev) {
  let lol = ev.dataTransfer.setData("text", ev.target.id);
  console.log(ev.target.id);
}));


// for div
div.addEventListener('dragover', function (ev) {
    ev.preventDefault()
})
div.addEventListener('drop', function (ev) {
  ev.preventDefault()
  ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("text")));
})
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 3px solid #fff555;
}
  <div id="div1"></div><br>
    <button id='b1' draggable="true">button one</button>
    <button id='b2' draggable="true">button two</button>

user_43619990
Related