Javascript 使用HTML5拖拽和x27进行列表排序；n'；Drop-根据鼠标的不同在上方或下方放置 背景

我正在处理可排序列表，以避免在数据库中手动键入排序顺序号。它通过HTML5的拖放功能工作，即Javascript中新的

drag*

事件

我现在大部分时间都在工作。我可以点击，拖动，它会自动排序

问题 据我所知，

drop

以及

dragstart

和

dragend

事件只知道它们要进入的元素。他们无法分辨鼠标是在dropzone的上半部分还是下半部分

我想要的是，当我悬停在列表项的上半部分时，将拖动的内容放置在该项的上方。然后，如果我将鼠标悬停在下半部分，则拖动的内容将放置在项目下方

目前： 在下面的屏幕截图中，我展示了一个代码的工作（简化）示例。我在放置目标上使用了一个

边框底部

，以显示它就是目标。请注意，当“项目1”位于“项目2”上方时，“项目2”在底部亮起，而不管我是悬停在上半部分还是下半部分

代码

var拖动=null；
document.addEventListener（'dragstart'，函数（事件）{
拖动=event.target；
event.dataTransfer.setData（'text/html'，拖动）；
});
文档.添加的事件列表器（'dragover'，函数（事件）{
event.preventDefault（）；
});
文档.添加事件列表器（'dragenter'，函数（事件）{
event.target.style['border-bottom']='solid 4px blue'；
});
document.addEventListener（'dragleave'，函数（事件）{
event.target.style['border-bottom']=''；
});
document.addEventListener（'drop'，函数（事件）{
event.preventDefault（）；
event.target.style['border-bottom']=''；
event.target.parentNode.insertBefore（拖动，event.target.nextSibling）；
});
ul{
保证金：0；
填充：0
}
李{
光标：移动；
显示：块；
填充：20px 10px；
背景：白色；
边框底部：实心1px灰色；
}

列表项1
列表项2
列表项目3
列表项4
列表项目5
列表项6
列出第7项
列表项目8
列表项目9
列表项10
答案
因此，在命运的转折中，对另一个问题的评论回应让我在这里找到了答案。在这里，正确的事件和方法值得称赞

不管怎么说，我来回答。解决方案在于使用
dragover
事件，而不是使用
dragenter
事件
dragover
在你悬停的时候一直开火

代码更改为问题代码
我们去掉了
dragenter
代码：

document.addEventListener('dragenter', function(event) {
    event.target.style['border-bottom'] = 'solid 4px blue';
});

替换为：

document.addEventListener('dragover', function(event) {
    event.preventDefault();
    var bounding = event.target.getBoundingClientRect()
    var offset = bounding.y + (bounding.height/2);
    if ( event.clientY - offset > 0 ) {
        event.target.style['border-bottom'] = 'solid 4px blue';
        event.target.style['border-top'] = '';
    } else {
        event.target.style['border-top'] = 'solid 4px blue';
        event.target.style['border-bottom'] = '';
    }
});

然后在
drop
部分中，我们检查drop目标的边界，并使用该边界在上方或下方插入拖动的内容

完整工作代码：

var拖动=null；
document.addEventListener（'dragstart'，函数（事件）{
var target=getLI（event.target）；
拖动=目标；
event.dataTransfer.setData（'text/plain'，null）；
event.dataTransfer.setDragImage（自拖动，0,0）；
});
文档.添加的事件列表器（'dragover'，函数（事件）{
event.preventDefault（）；
var target=getLI（event.target）；
var bounding=target.getBoundingClientRect（）
变量偏移=边界y+（边界高度/2）；
如果（event.clientY-偏移量>0）{
target.style['border-bottom']='solid 4px blue'；
target.style['border-top']=''；
}否则{
target.style['border-top']='solid 4px blue'；
target.style['border-bottom']=''；
}
});
document.addEventListener（'dragleave'，函数（事件）{
var target=getLI（event.target）；
target.style['border-bottom']=''；
target.style['border-top']=''；
});
document.addEventListener（'drop'，函数（事件）{
event.preventDefault（）；
var target=getLI（event.target）；
if（target.style['border-bottom']！=''）{
target.style['border-bottom']=''；
target.parentNode.insertBefore（拖动，event.target.nextSibling）；
}否则{
target.style['border-top']=''；
target.parentNode.insertBefore（拖动，event.target）；
}
});
函数getLI（目标）{
while（target.nodeName.toLowerCase（）！='li'和&target.nodeName.toLowerCase（）！='body'）{
target=target.parentNode；
}
if（target.nodeName.toLowerCase（）=='body'）{
返回false；
}否则{
回报目标；
}
}
ul{
保证金：0；
填充：0
}
李{
光标：移动；
显示：块；
填充：20px 10px；
背景：白色；
边框底部：实心1px灰色；
}

列出项目1
列出第2项
列出第3项
列出第4项
列出第5项
列出第6项
列出第7项
列出第8项
列出第9项
列出第10项
当您单击它时，光标：移动仍然出现，而不是箭头指针，是否可以将其设置为？我正在尝试制作一些简单的东西，比如jQueryUI版本，但只使用光标：move