这是基于实现的轻量级JS拖动分类库。它适用于以下情况：
无论是对容器中的元素进行排序，还是两个容器中元素的移动，它都是实质上实现的。
让我们首先熟悉sortablejs。
1. HTML结构：
2.容器的实例：
现在，您可以对容器进行排序和拖动，或拖动左容器元素，然后将其添加到右侧的容器中。
在查看源代码之前，您仍然需要对我们有一定的了解。如果您不熟悉，则很容易放弃源代码。
如果您更熟悉，则可以根据sortableJ的观看效果提出一个一般想法。
拖动，首先了解两个词汇对象：
在sortablej中，拖动以下事件：
让我们一起分析sortableJ的具体实现。
从上面的示例中学到的，sortablej是一个构造函数，接收容器元素和配置项：
初始化了以下示例：以下事件：
对于两个容器元素的相互拖动场景，该组的核心代码如下：
当鼠标按下触发事件时，它将保存拖放元素信息，提供后续使用并注册事件：
也就是说，该方法用于在父容器中获取索引：
它用于处理事件的逻辑，并使用它来处理拖动和拖动最终逻辑。例如，它在此处执行，因此需要由鼠标松开。
有趣的观点是事件。其处理功能与实例本身绑定。我们都知道实例对象是一个对象。我们如何将其用作函数？
实际上，第二个参数可以是函数或对象。当它是一个对象时，您需要提及一种处理事件的方法：
在这一点上，整个拖动过程函数都公开了：
我在这里做了两件事：
通过构造事件对象，将拖动元素的信息添加到自定义事件对象，传递给外部注册事件函数中，常规代码如下：
可以看出，拖动的核心逻辑不在中间，我们要查看下面的处理函数。
核心逻辑位于中间，并且将容器中的项目排序为一个示例：当将元素拖动并移动到另一个元素时，将发生两者的位置。可以看出，这种逻辑在这里。
首先，该事件与实例化对象的事件绑定，并处理事件逻辑以处理:::::
在中间，您需要注意，如果有两个容器，则有两个新的可排序实例对象，这些对象是错误的，需要确定拖放容器（是否允许移动）和（是否不执行）从元素上添加阻力拖动。
以上的核心是以下行代码：
另外，如果它是两个容器（）的场景，以及拖动元素的容器，则需要将创建的克隆元素渲染到容器中：
主要做一些完成工作，例如下一个结合鼠标，DragStart，Dragend事件，触发用户传递的事件。
但是请注意，尽管它被命名为Drop，但确实是触发事件。
如果您想在拖动排序时具有一定的动画动画效果，则可以配置动画属性。属性值是动画的耐用值：
动画的时机也在中间，一般思维如下：
1.记录：记录集装箱子信息的位置信息
2.执行：通过上述步骤，可以根据运动前后的位置执行动画操作
一般实施如下：
本文基于对拖延想法的探索，以了解行业开源拖动图书馆的设计和想法。谢谢您阅读。
原始：https：//juejin.cn/post/709747980827937975