如何使用拖放 HTML API 顯示可放置區域

Question

我正在實現一個功能，用戶可以在其中對列表進行排序並重新排序元素，在拖動時我想顯示拖動元素下方的可放置區域。

注意：我想使用本機 javascript 來實現這一點

Answer 1

沒有看到您的代碼，我無法建議一個確切的實現，但您可以使用 JS 來注入“占位符”元素。

首先，您需要知道所有項目的位置，也許使用數組來記錄列表項目的順序。

接下來，在拖動時將占位符元素附加到列表中您要移動的被拖動項目所在的位置。 例如，如果您有一個如下列表：

ITEM 1
ITEM 2
ITEM 3
ITEM 4

當您將 ITEM 4 拖到 ITEM 3 上，然后在 ITEM 2 之后插入占位符，使其出現在 ITEM 2 和 3 之間。當您放下 ITEM 3 時，您可以移除占位符。

請注意，當您進一步向上/向下移動列表時，您還必須刪除注入的占位符。 否則，您最終會得到多個占位符。

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