关于drag拖拽事件的那些事

基础用法

1、官网代码

<!-- 接受被移动元素 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!-- 被移动元素 -->
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

// 拖动元素放置的容器 
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目标元素）中

鼠标默认显示

1、效果描述

一个课表，每个格子都是一个课程。拖到空白元素的可新增，而有课程的地方需要显示禁选。理想效果如下图：

2、代码：

allowDrop(e, week, index, id)
{
    // 如果格子有元素 才阻断默认行为（其实默认行为就是鼠标icon为禁选，取消就是可以新增）
    if (!week)
    {
        e.preventDefault();
    }
}

拖动中样式设置

1、效果描述

拖动过程中，我希望我能知道我现在悬停在哪个元素上。实现效果如下：

2、实现思路

dragover事件监听的其实是被拖到的位置，于是可以在dragover事件中获取当前元素，给它一个标记。

由于我的代码是用vue循环得出，于是我给了一个下标值标记。

伪代码如下：

<!-- dragHoverIndex 代表当前悬浮的元素  drag-hover-cell 为悬浮元素的样式 -->
<td v-for="(week, wi) in d.arrangeList"
:key="'daily_week_'+wi"
:class="{'drag-hover-cell': dragHoverIndex === (wi + '_' + d.id)}""
class="course-cell has-class"
@drop="drop($event, d, wi)"
@dragover="allowDrop($event, week, wi, d.id)"
                            >
                                ...
                            </td>

1	.drag-hover-cell{border: 1px solid #409EFF;}

allowDrop(e, week, index, id)
{
    // week 有值 则有课程  无值则显示悬浮样式
	if (!week)
    {
    	e.preventDefault();
    	this.dragHoverIndex = index + "_" + id;
    }
    else
    {
    	this.dragHoverIndex = -1;
    }
}