Javascript Jquery拖放-在其他容器之前插入拖动的div容器

我得到了一些容器，希望通过在容器之前插入拖动的容器来操作DOM，拖动的容器正在拖动

意味着。。。 这是当前的位置

现在我想把红色的容器放在绿色的容器之前

看起来是这样的

重要提示：我知道有Jquery UI，而且它非常容易使用，但我可能不会使用它

因此我知道我可以使用jquery函数

.insertBefore（）

和

.insertAfter（）

，但我正在努力处理拖动事件

下面是一个小例子，展示了我目前的工作

$（document）.ready（函数（）{//将事件添加到容器中
添加DragDroptoElement（“divRed”）；
添加DragDroptoElement（“divBlue”）；
添加DragDroptoElement（“divGreen”）；
添加DragDroptoElement（“divYellow”）；
});
函数addDragDropToElement（元素）{
变量ele=$（“#”+元素）；
ele.prop（“draggable”，true）；//使div可拖动
ele.on（'dragstart'，函数（）{
启动（事件）；
});
ele.on（'dragenter'，函数（）{
（事件）；
});
元件on（'dragover'，函数（）{
德拉戈弗（事件）；
});
ele.on（'dragleave'，function（）{
（事件）；
});
ele.on（'drop'，function（）{
元素（事件）；
});
ele.on（'dragend'，function（）{
停止拖动（事件）；
});
}
var draggedElement=null；
功能启动（e）{
draggedElement=e.target；
}
函数（e）{
}
函数dragOver（e）{
e、 预防默认值（）；
}
函数（e）{
}
功能元件（e）{
e、 预防默认值（）；
var targetElement=e.target；
$（draggedElement）.insertBefore（targetElement）；
}
函数停止拖动（e）{
}

#divRed{背景：红色；}
#divBlue{背景：蓝色；}
#divGreen{背景：绿色；}
#divYellow{背景：黄色；}
.集装箱{
宽度：50px；
高度：50px；
显示：内联块；
}

---

所以我终于得到了它。如果有人想知道它是如何工作的，拿着这把小提琴

$（文档）.ready（函数（）{
添加DragDroptoElement（“divRed”）；
添加DragDroptoElement（“divBlue”）；
添加DragDroptoElement（“divGreen”）；
添加DragDroptoElement（“divYellow”）；
});
函数addDragDropToElement（元素）{
变量ele=$（“#”+元素）；
元素属性（“可拖动”，真实）；
ele.on（'dragstart'，函数（）{
启动（事件）；
});
元件on（'dragover'，函数（）{
德拉戈弗（事件）；
});
ele.on（'drop'，function（）{
元素（事件）；
});
}
var draggedElement=null；//被拖动的元素
功能启动（e）{
draggedElement=e.target；//存储被拖动的元素
}
函数dragOver（e）{
e、 预防默认值（）；
}
功能元件（e）{
e、 预防默认值（）；
var targetElement=e.target；//拖动元素下的元素
$（DragDelete）.insertBefore（targetElement）；//将拖动的元素放在其他元素之前
}

#divRed{背景：红色；}
#divBlue{背景：蓝色；}
#divGreen{背景：绿色；}
#divYellow{背景：黄色；}
.集装箱{
宽度：50px；
高度：50px；
显示：内联块；
}

我认为，如果你自己去实现它会更好，如果我们为你做这项工作，你就什么也学不到。这很好地解释了这一点，但是有成千上万的教程there@Doomenik我更新了我的帖子，这看起来像是一个有效的拖放，不是吗？看起来不错：）很好，谢谢。你的链接帮了我很多