摘要：放到何处放到何处事件规定在何处放置被拖动的数据。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。注释在中不支持拖放。
设置元素为可拖放
draggable 属性设置为 true:
<img draggable="true" />
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(e) {
e.dataTransfer.setData("text/html", value);
}
注："text/html"参数，我在Mac上用Safari打开，遇到过不能正常解析，解决方法把html和text位置互换一下。ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
event.preventDefault();
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("text/html") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
function drop(e) {
e.preventDefault();
}
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.drag {
width: 50px;
height: 50px;
background: blue;
display: inline-block;
margin: 10px;
color: white;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: move;
}
style>
head>
<body>
<div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1div>
<div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2div>
<div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3div>
<script type="text/javascript">
var srcEl = null;
function drag(e, el) {
srcEl = el;
e.dataTransfer.setData("text/html", el.innerHTML);
}
function drop(e, el){
e.preventDefault();
// e.stopPropagation();
if (srcEl != el) {
srcEl.innerHTML = el.innerHTML;
el.innerHTML = e.dataTransfer.getData("text/html");
}
}
function allowDrop(e) {
e.preventDefault();
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
#div1 {
width: 300px;
height: 300px;
border: 1px solid red;
}
#drag1 {
width: 300px;
height: 300px;
}
style>
head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<img id="drag1" draggable="true" ondragstart="drag(event)"
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />
<script type="text/javascript">
function drag(e) {
e.dataTransfer.setData("text/html", e.target.id);
}
function drop(e) {
e.preventDefault();
e.stopPropagation();
var id = e.dataTransfer.getData(text/html);
e.target.appendChild(document.getElementById(id));
}
function allowDrop(e) {
e.preventDefault();
}
script>
body>
html>
W3school原文链接：http://www.w3school.com.cn/html5/html_5_draganddrop.asp
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2075.html
摘要：发展原生拖放的发展大致可分为三个阶段。在的实例基础上，进一步制定了拖放的规范。也根据规范实现了原生拖放功能。被拖动的元素在放置目标范围内移动时，会持续触发该事件。参考资料拖放操作拖拽操作拖拽类型列表高级程序设计第版第章脚本编程原生拖放 发展 原生拖放的发展大致可分为三个阶段：IE4、IE5+、HTML5。 IE4 是最早在网页中引入 JavaScript 拖放功能的，当时只有图像和选中...
摘要：在中，唯一有效的放置目标是文本框。以的实例为基础指定了拖放规范。触发事件后，随即会触发事件，而且在元素被拖动期间会持续发送该事件。指定一副图像，当拖动发生时，显示在光标下方。 最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元...
阅读 432·2023-04-25 19:43
阅读 3623·2021-11-30 14:52
阅读 3418·2021-11-30 14:52
阅读 3524·2021-11-29 11:00
阅读 3492·2021-11-29 11:00
阅读 3523·2021-11-29 11:00
阅读 3260·2021-11-29 11:00
阅读 5417·2021-11-29 11:00
