猿变实验室之猿变开发手册-HTML5语法入门-HTML5 拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

现代浏览器都支持拖放

HTML5 拖放实例

下面的例子是一个简单的拖放实例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>python-xp.com 轻松学python</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowOver(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));
}
</script>
</head>
<body>
 
<p>拖动图片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowOver(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/uploads/2022/1/a779948f-288e-4bf7-91a0-42455a052f1e.gif"  draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

为了使元素可拖动，把 draggable 属性设置为 true ：

尝试运行拖动图片

<img src="/uploads/2022/1/a779948f-288e-4bf7-91a0-42455a052f1e.gif" draggable="true">

设置ondragstart事件

开始拖动图片会触发dragstart事件。

在下面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

拖动时可以设置数据，放下时可以接受数据

dataTransfer.setData() 方法设置被拖数据的数据名和值

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据标识符。值是可拖动元素的id ("drag1")。

代码示例：

<style>
div {
width: 50%;
height: 300px;
border: 1px solid red;
}
</style>
<img id="img" src="/uploads/2022/1/a779948f-288e-4bf7-91a0-42455a052f1e.gif"  draggable="true" ondragstart="drag(event)">
<div id="tips"></div>
<script>
function drag(ev)
{   
    document.getElementById("tips").innerHTML="Y:" + document.getElementById("img").offsetTop + " " + "X:"+document.getElementById("img").offsetLeft
    //可以设置数据
    ev.dataTransfer.setData("Text", ev.target.id);
}
</script>

设置ondragover事件

ondragover事件规定当拖动元素经过其他元素时，其他元素是否放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

<style>div {width: 50%;height: 300px;border: 1px solid red;}</style>
<img id="img" src="/uploads/2022/1/a779948f-288e-4bf7-91a0-42455a052f1e.gif" draggable="true" ondragstart="drag(event)">
<!-- 给div添加ondragover属性 event为事件实参参数-->
<div id="tips" ondragover="allowOver(event)"></div>
<script>
// 本步骤新增代码
function allowOver(e) {
   e.preventDefault()
   document.getElementById("tips").innerHTML = "经过我了"
}

// 上一步骤代码
function drag(ev)
{   
    document.getElementById("tips").innerHTML="Y:" + document.getElementById("img").offsetTop + " " + "X:"+document.getElementById("img").offsetLeft
    //可以设置数据
    ev.dataTransfer.setData("Text", ev.target.id);
}
</script>

释放拖拽事件ondrop

当放置被拖元素到其他元素时，会在其他元素发生 drop 事件。

在下面的例子中，为div添加了ondrop 属性，并在事件触发时调用一个函数drop(event)：

<style>div {width: 50%; height: 300px; border: 1px solid red;}</style>
<img id="img" src="/uploads/2022/1/a779948f-288e-4bf7-91a0-42455a052f1e.gif" draggable="true" ondragstart="drag(event)">
<!-- 给div添加ondrop属性 event为事件实参参数-->
<div id="tips" ondragover="allowOver(event)" ondrop="drop(event)"></div>
<script>
// 本步骤新增代码
// 通过event.dataTransfer.getData(数据名)获得传递的数据
function drop(ev){
   ev.preventDefault()
   data = ev.dataTransfer.getData("Text")
   ev.target.innerHTML = data
   ev.target.appendChild(document.getElementById(data));
}

// 上一步骤代码
function allowOver(e) {
   e.preventDefault()
   document.getElementById("tips").innerHTML = "经过我了"
}

// 上一步骤代码
function drag(ev)
{   
    document.getElementById("tips").innerHTML="Y:" + document.getElementById("img").offsetTop + " " + "X:"+document.getElementById("img").offsetLeft
    //可以设置数据
    ev.dataTransfer.setData("Text", ev.target.id);
}
</script>

代码解释：

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

HTML5 拖放