如何在 html 和 js 中进行拖放操作？

Question

There're 2 element div which are two mode of a table (side-table and center-table).有 2 个元素 div，它们是表格的两种模式（边表和中心表）。 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.在这里，我使用 js 获取拖动元素的 id 和放置元素的 id，然后将它们的不透明度设置为 0 和 1。但是浏览器无法获取元素的 id。 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] [边桌][https://drive.google.com/file/d/1GM5eA-AevwqKpYKCGe7vld3OMtRJnvXE/view?usp=sharing]

[demo video][https://drive.google.com/file/d/1O8FbfRNudlgdsI_l3cGKqeSmSch03FTN/view?usp=sharing] [演示视频][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:用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";
}

Answer 1

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

如何在 html 和 js 中进行拖放操作？

问题描述

1 个解决方案

解决方案1
0 2022-05-23 09:29:43

如何在 html 和 js 中进行拖放操作？

问题描述

1 个解决方案

解决方案1 0 2022-05-23 09:29:43

解决方案1
0 2022-05-23 09:29:43