第一次接触DRAG和DROP时，我遇到了一个非常困难的描述（这是我的主观意见。我要求您不同意他的观点，而是重新阅读所有可能的东西，并从多个角度审视这个问题）。 我决定写几篇文章，专门针对那些想学习Zen的开发人员。
本文将包括两个部分：
- 创建DRAG和DROP效果的方法。
- 使用DRAG和DROP创建排序所获得的知识的实际应用
第1段创建DRAG和DROP效果的方法
在开始深入分析之前，我们先来看一下。 想象一下自己是一名装载者，您需要将箱子从一个地方移到另一个地方。 对于装载机，“好吧，我拿走了，好了，我把它转移了。 完成了！”，对于程序员，“我去了箱子，弯腰，拿起箱子，拿起箱子，走了N步，弯腰，放开了箱子。” 我的意思是，在开始工作之前，您将失去所有的头脑，逐步的东西，您将更加接近真相。
我要保留有几种创建此效果的方法，请务必阅读全部内容。 我将利用我目前认为最方便的一种。
创建DRAG和DROP时，第一步是将要移动的对象设置为draggable ='true'。
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
，
在第一阶段，我想展示流程本身，然后将其传播到所有对象。 我们目前正在使用JS，并且您知道，浏览器中存在各种事件，我们可以在这些事件中附加自己的操作序列。 让我们看一下创建DRAG和DROP的必要事件：
dragstart-用户开始拖动项目时发生。
拖动 -
拖动项目时发生。
dragend-用户完成拖动项目时发生。
dragenter-当拖动的项目击中目标时发生。
dragleave-当拖动的项目离开目标时发生。
拖曳-当拖曳的项目在目标上方时发生。
drop-当被拖动的项目落到目标上时发生。
现在非常重要的信息！ 活动分为两组。 对于移动的项目（我们正在拖动的项目）：dragstart，Drag，Dragend。 对于接收元素（我们将其拖动到的位置）：Dragenter，Dragleave，Dragover，Drop。 这些事件不能相反地起作用，但是它们可以彼此不起作用。
例如：您需要移动对象并将其保留在我们释放鼠标按钮的位置。 此任务不需要主机部分。
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;</script> </body> </html>
毫无疑问，该示例是在膝盖上完成的，但它完美地说明了接收对象的可选性。
我认为带有单独事件的示例
毫无用处 ，因为如果在
d1.addEventListener（'dragstart'，function（）{行中 ，将'dragstart'替换为任何其他事件，则可以对其进行处理并获得有趣的结果。 ，播放并在评论中显示您觉得异常和有趣的内容，因此每个人都将学到很多东西，并且可以自己重复。
第2段 DROP在DRAG和DROP中不起作用
尝试所有事件时，您会发现该删除不起作用。 正是这种方法的开发者向那些决定“就这样……...，胡说八道”的人致敬。
好吧，一切都很简单，在放置事件之前，您需要将事件挂在同一元素上
d2.addEventListener('dragover',function() { event.preventDefault(); });
将此视为事实；没有它就无法工作。