背景

我正在开发一个可排序的列表,以避免在数据库中手动输入排序顺序号.它通过HTML5的拖放功能工作,即drag*Javascript中的新事件.

我目前在大多数情况下工作.我可以点击,拖动,它会自行排序.

问题

从我所知道的,drop与沿dragstart和dragend事件,只知道他们正在进入的元素.他们无法判断鼠标是否位于dropzone的上半部分或下半部分.

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

目前:

在下面的屏幕截图中,我展示了我的代码的工作(简化)示例.我border-bottom在掉落目标上使用了一个来表明它是目标.注意当"项目1"在"项目2"之上时,"项目2"在底部点亮,无论我是否在上半部分或下半部分上空盘旋.

码

var dragging = null;

document.addEventListener('dragstart', function(event) {
		dragging = event.target;
    event.dataTransfer.setData('text/html', dragging);
});

document.addEventListener('dragover', function(event) {
    event.preventDefault();
});

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

document.addEventListener('dragleave', function(event) {
    event.target.style['border-bottom'] = '';
});

document.addEventListener('drop', function(event) {
    event.preventDefault();
    event.target.style['border-bottom'] = '';
    event.target.parentNode.insertBefore(dragging, event.target.nextSibling);
});

ul {
  margin:0;
  padding:0
}
li {
  cursor:move;
  display:block;
  padding:20px 10px;
  background:white;
  border-bottom:solid 1px gray;
}

<ul> …

我在我的 Vue JS Web 应用程序上设置了一个拖放框。该元素是一个简单的 div，当文件拖放到文件上时，它会处理文件。

我使用https://www.raymondcamden.com/2019/08/08/drag-and-drop-file-upload-in-vuejs作为指导。

HTML：

<div v-if="status == 'upload'">
    <h3> Please fill the data sheet and upload it here!</h3>
    <div class="downbox" @drop.prevent="addFile" @dragover.prevent>
        <span style="font-size: 60px"><font-awesome-icon icon='cloud-upload-alt'/></span>
        <br>
        Click to Browse 
        <br>
        or Drag and Drop a File Here
    </div>
</div>

JS：

addFile: function(e){
            let droppedFiles = e.dataTransfer.files;
            if ((droppedFiles[0].name).slice(-5) !== '.xlsx') {
                this.$swal({
                    text: "Please upload a file of type .xlsx",
                    title: "Incorrect File Type!",
                    icon: "error",
                })
                this.status = 'upload'
            }
            else { …