HTML5 拖放、交换位置

设置元素为可拖放

draggable 属性设置为 true: <img draggable="true" />

拖动什么 - ondragstart 和 setData()

dataTransfer.setData() 方法设置被拖数据的数据类型和值: function drag(e) { e.dataTransfer.setData("text/html", value); }注："text/html"参数，我在Mac上用Safari打开，遇到过不能正常解析，解决方法把html和text位置互换一下。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 　　event.preventDefault();

进行放置 - ondrop

调用 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 中不支持拖放。

示例：

Example1:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><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)">1</div><div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2</div><div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3</div><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>

Example2:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><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

本文转载于:猿2048➮https://www.mk2048.com/blog/blog.php?id=ji2aahj&title=HTML5 拖放、交换位置

HTML5 拖放、交换位置相关推荐

html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
html5怎么设置drop,HTML5 拖放（Drag 和 Drop）
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 将 RUNOOB.COM 图标拖动到矩形框中. 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标 ...
html拖放数据库字段,HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. #div1 {width:350px;height:70px;padding:10p ...
HTML5 拖放（Drag 和 Drop）简介
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖 ...
html拖放api之图片相框,html5拖放API简介及应用
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 通常我们在上传文件时,需要使用这样的上传文件标签.而在html5中,它提供了拖放的接口,以下的内容就是对html5拖放 ...
HTML5拖放（drag and drop）与plupload的懒人上传
HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放拖放是HTML5标准的一部分,任何元素都能够拖放 ...
jQ html5拖放
HTML5 拖放 draggable=true dragstart 拖放开始的时候触发 drag 拖放过程中一直触发 dragend 拖放结束后触发 dragenter 对于被放置的标签而言如果 ...
8086汇编-实验5(微调)-用栈实现数据交换位置
初始状态: 代码如下: assume cs:code,ds:data,ss:stackdata segmentdw 0123h,1234h,2345h,3456h,4567h,5678h,6789h, ...
html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...

HTML5 拖放、交换位置

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover

进行放置 - ondrop

浏览器支持

示例：

Example1:

Example2:

HTML5 拖放、交换位置相关推荐

最新文章

热门文章