0

There're 2 element div which are two mode of a table (side-table and center-table). When user drag and drop center-table on left area then it would turn into side-table and vice-versa.

Here I use js to get id of draged element and id of droped element then set their opacity to 0 and 1. But browser can't get id of elements. What's the problems or is there any another way to do this? [side-table][https://drive.google.com/file/d/1GM5eA-AevwqKpYKCGe7vld3OMtRJnvXE/view?usp=sharing]

[demo video][https://drive.google.com/file/d/1O8FbfRNudlgdsI_l3cGKqeSmSch03FTN/view?usp=sharing]

<div class="control-bar" ondragover="allowDrop(event)" ondrop="drop(event)">
    <div class="sidebar" draggable="true" id="sidebar" ondragstart="drag(event)"></div>
</div>

<div class="centre" ondragover="allowDrop(event)" ondrop="drop(event)">
        <div class="wrapper" id="wrapper" draggable="true" ondragstart="drag(event)"></div>
</div>

With js:

function allowDrop(e) {
    e.preventDefault();
}
function drag(e) {
    e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    document.getElementById(data).style.opacity = "0";
    console.log(e.target.id);
    document.getElementById(e.target.firstChild).opacity = "1";
}
Phat Le
  • 1
  • 1
  • use dropzone library visit this link https://stackoverflow.com/questions/17872417/integrating-dropzone-js-into-existing-html-form-with-other-fields#answer-29166817 – Robin Hood May 23 '22 at 09:20

1 Answers1

0

you can use my solution

<body>
  <div class="container">
    <p class="draggable" draggable="true">1</p>
    <p class="draggable" draggable="true">2</p>
  </div>
  <div class="container">
    <p class="draggable" draggable="true">3</p>
    <p class="draggable" draggable="true">4</p>
  </div>
</body>


const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
  draggable.addEventListener('dragstart', () => {
    draggable.classList.add('dragging')
  })

  draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging')
  })
})

containers.forEach(container => {
  container.addEventListener('dragover', e => {
    e.preventDefault()
    const afterElement = getDragAfterElement(container, e.clientY)
    const draggable = document.querySelector('.dragging')
    if (afterElement == null) {
      container.appendChild(draggable)
    } else {
      container.insertBefore(draggable, afterElement)
    }
  })
})

function getDragAfterElement(container, y) {
  const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

  return draggableElements.reduce((closest, child) => {
    const box = child.getBoundingClientRect()
    const offset = y - box.top - box.height / 2
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child }
    } else {
      return closest
    }
  }, { offset: Number.NEGATIVE_INFINITY }).element
}
body {
  margin: 0;
}

.container {
  background-color: #333;
  padding: 1rem;
  margin-top: 1rem;
}

.draggable {
  padding: 1rem;
  background-color: white;
  border: 1px solid black;
  cursor: move;
}

.draggable.dragging {
  opacity: .5;
}
Jamir Hossain
  • 1