如何使用拖放HTML API显示可丢弃区域



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

注意:我想使用本机javascript来实现这一点

在没有看到您的代码的情况下,我不能建议一个确切的实现,但您可以使用JS注入一个"占位符";要素

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

接下来,在拖动时,将占位符元素追加到您要移动的拖动项目在列表中的位置。例如,如果您有一个列表,如:

ITEM 1
ITEM 2
ITEM 3
ITEM 4

将项目4拖动到项目3上时,在项目2之后插入占位符,使其显示在项目2和3之间。放置ITEM 3时,可以删除占位符。

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

还有一些插件可用于此,如HTML5 Sortable和SortableJS

相关内容

  • 没有找到相关文章

最新更新