在DOM中使用JavaScript拖动时，如何获取DOM中的项目位置

编程问答 2022-06-06

问题描述

我在JavaScript中使用拖动API时遇到了一些问题

我想要制作一个类似于Trello的页面，当我在Trello中拖动某些元素并将其移动到某个有效的放置目标时，它就会像这样

enter image description here

我的问题是，当我的商品输入html中的某个有效目标以制作具有背景颜色（如图片）的空白框时，如何获取商品的位置

我在整个列表中使用了dragover和drop，我的意思是ul，当客户离开鼠标时，它将追加到列表的末尾，但是我想将其追加到客户离开的任何地方在列表中

listContainer.addEventListener('drop',function(e){
    e.preventDefault();
    if(e.dataTransfer.getData('text/html').split('-')[0] === 'card'){
        listContainer.appendChild(document.getElementById(e.dataTransfer.getData('text/html')));
    }
});
listContainer.addEventListener('dragover',function(e){
    e.preventDefault();
});

这是我的dragstart事件

document.addEventListener('dragstart',function(e){
    if(e.target.classList.contains('task')){
        e.dataTransfer.setData('text/html',e.target.id);
    }
});

请注意，我只想使用JavaScript而不是JQuery或其他方式

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

frontendhtmljavascripttrello