如何使用拖放 HTML API 显示可放置区域答案

【问题标题】：How to show droppable area using Drag and Drop HTML API如何使用拖放 HTML API 显示可放置区域
【发布时间】：2020-09-29 10:32:26
【问题描述】：

我正在实现一个功能，用户可以对列表进行排序并重新排序元素，在拖动时我想在拖动元素下方显示可放置区域。

注意：我想使用原生 javascript 来实现这一点

【问题讨论】：

【解决方案1】：

没有看到您的代码，我无法建议一个确切的实现，但您可以使用 JS 来注入“占位符”元素。

首先，您需要知道所有项目的位置，也许使用数组来记录列表项目的顺序。

接下来，在拖动时，将占位符元素附加到您要移动的拖动项目在列表中的位置。例如，如果您有如下列表：

ITEM 1
ITEM 2
ITEM 3
ITEM 4

当您将 ITEM 4 拖到 ITEM 3 上时，然后在 ITEM 2 之后注入占位符，使其出现在 ITEM 2 和 3 之间。当您放下 ITEM 3 时，您可以移除占位符。

请注意，当您在列表中进一步向上/向下移动时，您还必须删除注入的占位符。否则，您最终会得到多个占位符。

也有可用的插件，例如 HTML5 Sortable 和 SortableJS

【讨论】：