Javascript 如何使用vanila javascriprt进行拖放？

我已经用vanilla javascript编写了一个拖放代码。当我选择第一个div时，它会自动移动到最后一个div，而我正在尝试移动下一个div

我不想使用jquery库

我尝试的是创建一个充当容器的主div，这样每个div在容器内部都可以轻松移动

我已经附上了我尝试过的东西，但我不明白为什么会发生这种情况。

const draggables=document.queryselectoral（“.draggable”）
const containers=document.queryselectoral（“.maincainer”）
draggables.forEach（draggable=>{
DragTable.addEventListener（'dragstart'，（）=>{
draggable.classList.add（'draggable'）
})
draggable.addEventListener（'dragend'，（）=>{
draggable.classList.remove（'draggable'）
})
})
containers.forEach（container=>{
container.addEventListener（'dragover'，e=>{
e、 预防默认值（）
const afterElement=getDragAfterElement（容器，e.clientY）
const draggable=document.querySelector（“.draggable”）
if（afterElement==null）{
container.appendChild（可拖动）
}否则{
容器。插入前（可拖动，后元素）
}
})
})
函数getDragAfterElement（容器，y）{
const draggableElements=[…container.queryselectoral（'.draggable:not（.draggable）]
返回draggableElements.reduce（（最近，子项）=>{
const box=child.getBoundingClientRect（）
常数偏移=y-box.top-box.height/2
if（偏移量<0&&offset>最近的.offset）{
返回{offset:offset，元素：child}
}否则{
返回最近的
}
}，{offset:Number.NEGATIVE_INFINITY}）.element
}

正文{
字体系列：无衬线；
}
.主集装箱{
填充：6px0；
宽度：100%；
}
.拖拉{
光标：移动；
显示：内联块；
边际：0.6px；
z指数：1；
颜色：#fff；
背景色：#087ee5；
边框：1px实心#0675d6；
边界半径：4px；
盒影：0 1px2pRGBA（0,0,0,0.4）；
文本对齐：居中；
最大宽度：300px；
最小宽度：30px；
边界塌陷：分离；
垂直对齐：中间对齐；
左侧填充：7px；
右侧填充：7px；
填充顶部：10px；
垫底：10px；
}
.拖拉{
不透明度：0.5；
}

移动1

移动2

移动3

移动4

为鼠标上方的dragables添加事件侦听器。 检查您的手上是否已经有可拖动部件。 如果不超过，则在鼠标悬停的节点之后追加手上可拖动的节点

---

将拖动元素的位置更改为绝对，并通过顶部和左侧定义其位置x&y

我建议不要使用拖动事件，而是使用鼠标事件。我的运气和可靠性都比这好得多，你也可以在屏幕外拖动：

handleDragStart = () => {
  // Once mouse down is detected, you THEN start up the window listeners
  // You also append something to the body of your DOM to escape
  // your drag graphic from getting covered
  window.addEventListener('mousemove', handleDragItem);
  // Use mouse up to see if you moused up on something you were targetting
  // You can use mouse over events on your targets to have easy state tracking
  // No matter what, when window mouse up happens, you clean up all 
  // event listeners involved
  window.addEventListener('mouseup', handleStopDrag);
});

拖放中涉及的每个元素都可以将这些事件与starter窗口事件（一种JSX方式来查看它以节省一些输入）配对

---

如果您的问题是停止拖动并将要拖动的对象放入其中，我将定义“区域”，您可以在其中放置元素，该区域取决于您拥有的元素数量，在本例中（4）您可以拥有相同的区域

1个区域将与拖动元素具有的区域相同 3个区域位于其他元素之间+起始和结束空间

因此，您需要计算何时删除此元素，我还将使用事件

mousedown

和

mouseup

，如果您想知道元素是否被“拖动”，您可以检查元素是否为

mousedown

+

mousemove

---

在我的例子中，我以前做过一个类似的解决方案，我让这个“区域”占每个元素的一半，这样它就可以在这些元素之间有一些空间，最左边和最右边可以是

和

>last\u element.position.X

计算最近的元素时的样子，您使用的是y位置而不是x位置，但是当我运行代码段时，元素是水平（x）排列的。这可能是错误的根源吗？即使没有，我仍然怀疑计算包含了这个问题。您可以添加一个低级测试或日志记录，以确定哪里出了问题。

<div 
  onMouseDown={this.handleDragStart(index, width, height)}
  onMouseMove={this.handleDragEnter(index)}
  onMouseUp={this.handleDrop(index)}
  onMouseOut={this.handleDragOut(index)}
/>