HTML5 拖放、交换位置
2018-06-24 02:28:40来源:未知 阅读 ()
设置元素为可拖放
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
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html基础用法(下)
下一篇:idea web 配置相对路径
- 1.html5概述 2020-05-25
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- HTML5开发工具有哪些?准备的这些HTML5开发工具赶紧了解一下! 2020-04-07
- [前端第六课]HTML5表单和php环境搭建 2020-04-01
- 【从零入门 Web 前端】HTML5 + CSS 简明教程 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash