#yyds干活盘点# 4.2 HTML5 拖放(Drag和Drop)
Posted 江下下啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干活盘点# 4.2 HTML5 拖放(Drag和Drop)相关的知识，希望对你有一定的参考价值。
拖放（Drap和drop）是html5标准的组成部分。
将RUNOOB.com图标拖动到矩形框中。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在HTML5中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
下面的例子是一个简单拿的拖放实例：
实例1
<style type="text/css">
#div1
width:350px;height:70px;
padding:10px;
border:1px solid #aaaaaa;
</style>
<script>
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)); </script>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
设置元素为可拖放
首先，为了使元素可拖动，把dargable属性设置为“true”：
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么
在上面的例子中，ondragstart属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData()方法设置被拖数据的数据类型和值：
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
Text是一个DOMString表示要添加到drag object的拖动数据的类型。值是可拖动元素的id（“drag1”）。
放在何处 - ondragover
ondragover事件规定在何处放置被拖动的数据。
默认地，无法将数据、元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用ondragover事件的event.preventDefault()方法：
ev.preventDefault();
进行放置 - ondrop
当放置被拖数据时，会发生drop事件。
上面例子中，ondrop属性调用了一个函数，drop（event）；
function drop(ev)
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
代码解释：
- 调用preventDefault（）来避免浏览器对数据的默认处理（drop事件的默认行为是以链接的形式打开）
- 通过dataTransfer.getData（“drag1”）
- 把被拖元素追加到放置元素（目标元素）中
实例2
如何在两个<div> 元素之间拖放图像。
<style type="text/css">
#div1, #div2
float:left;
width:100px;
height:35px;
margin:10px;
padding:10px;
border:1px
solid #aaaaaa;
</style>
<script>
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));
</script>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true"
ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
以上是关于#yyds干活盘点# 4.2 HTML5 拖放(Drag和Drop)的主要内容，如果未能解决你的问题，请参考以下文章