资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/HTML5 拖放、交换位置

HTML5 拖放、交换位置

番茄西红柿 / 1376人阅读

摘要：放到何处放到何处事件规定在何处放置被拖动的数据。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。注释在中不支持拖放。

设置元素为可拖放

</>复制代码 
  1. draggable 属性设置为 true:
  2.     <img draggable="true" />
拖动什么 - ondragstart 和 setData()
</>复制代码 
  1. dataTransfer.setData() 方法设置被拖数据的数据类型和值:
  2.     function drag(e) {
  3.         e.dataTransfer.setData("text/html", value);
  4.     }
    注："text/html"参数，我在Mac上用Safari打开，遇到过不能正常解析，解决方法把html和text位置互换一下。
放到何处 - ondragover
</>复制代码 
  1. ondragover 事件规定在何处放置被拖动的数据。
  2. 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
  3. 　　event.preventDefault();
进行放置 - ondrop
</>复制代码 
  1. 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  2. 通过 dataTransfer.getData("text/html") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  3. function drop(e) {
  4.     e.preventDefault();
  5. }
浏览器支持
</>复制代码 
  1. Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
  2. 注释：在 Safari 5.1.2 中不支持拖放。

示例：

Example1:
</>复制代码 
  1. DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Documenttitle>
  6.     <style type="text/css">
  7.     html,
  8.     body {
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.     .drag {
  13.         width: 50px;
  14.         height: 50px;
  15.         background: blue;
  16.         display: inline-block;
  17.         margin: 10px;
  18.         color: white;
  19.         font-size: 20px;
  20.         text-align: center;
  21.         line-height: 50px;
  22.         cursor: move;
  23.     }
  24.     style>
  25. head>
  26. <body>
  27.     <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1div>
  28.     <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2div>
  29.     <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3div>
  30.     <script type="text/javascript">
  31.         var srcEl = null;
  32.         function drag(e, el) {
  33.             srcEl = el;
  34.             e.dataTransfer.setData("text/html", el.innerHTML);
  35.         }
  36.         function drop(e, el){
  37.             e.preventDefault();
  38.             // e.stopPropagation();
  39.             if (srcEl != el) {
  40.                 srcEl.innerHTML = el.innerHTML;
  41.                 el.innerHTML = e.dataTransfer.getData("text/html");
  42.             }
  43.         }
  44.         function allowDrop(e) {
  45.             e.preventDefault();
  46.         }
  47.     script>
  48. body>
  49. html>
Example2:
</>复制代码 
  1. DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Documenttitle>
  6.     <style type="text/css">
  7.     html,
  8.     body {
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.     #div1 {
  13.         width: 300px;
  14.         height: 300px;
  15.         border: 1px solid red;
  16.     }
  17.     #drag1 {
  18.         width: 300px;
  19.         height: 300px;
  20.     }
  21.     style>
  22. head>
  23. <body>
  24.     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
  25.     <img id="drag1" draggable="true" ondragstart="drag(event)"
  26.         src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />
  27.     <script type="text/javascript">
  28.     function drag(e) {
  29.         e.dataTransfer.setData("text/html", e.target.id);
  30.     }
  31.     function drop(e) {
  32.         e.preventDefault();
  33.         e.stopPropagation();
  34.         var id = e.dataTransfer.getData(text/html);
  35.         e.target.appendChild(document.getElementById(id));
  36.     }
  37.     function allowDrop(e) {
  38.         e.preventDefault();
  39.     }
  40.     script>
  41. body>
  42. html>

 W3school原文链接：http://www.w3school.com.cn/html5/html_5_draganddrop.asp

GPU云服务器 云服务器 html5拖放上传 php数组位置交换 html5交换图片 html5位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2075.html

相关文章

  • HTML5 原生拖放

    摘要：发展原生拖放的发展大致可分为三个阶段。在的实例基础上，进一步制定了拖放的规范。也根据规范实现了原生拖放功能。被拖动的元素在放置目标范围内移动时，会持续触发该事件。参考资料拖放操作拖拽操作拖拽类型列表高级程序设计第版第章脚本编程原生拖放 发展 原生拖放的发展大致可分为三个阶段：IE4、IE5+、HTML5。 IE4 是最早在网页中引入 JavaScript 拖放功能的，当时只有图像和选中...

    Thanatos 评论0 收藏0

  • JavaScript HTML5脚本编程——“原生拖放”的注意要点

    摘要：在中，唯一有效的放置目标是文本框。以的实例为基础指定了拖放规范。触发事件后，随即会触发事件，而且在元素被拖动期间会持续发送该事件。指定一副图像，当拖动发生时，显示在光标下方。 最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元...

    forsigner 评论0 收藏0

  • HTML5新特性

    摘要：年月日，万维网联盟宣布，标准规范制定完成。作为一种超文本标记语言，已经成为了上使用的通用标记语言，而在这次的规范中，为开发者带来了一些令人兴奋的新特性。 2014年10月29日，W3C(万维网联盟)宣布，HTML5标准规范制定完成。作为一种超文本标记语言，HTML已经成为了Web上使用的通用标记语言，而在这次HTML5的规范中，为开发者带来了一些令人兴奋的新特性。 下面简单地介绍下这些...

    bang590 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<