HTML5--拖放(Drag&Drop)随笔

时间:2022-11-19 19:28:52

在 HTML5 中,拖放是标准的一部分,即抓取对象以后拖到另一个位置(添加已定义好的父级元素里),任何元素都能够拖放。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

*注释:在 Safari 5.1.2 中不支持拖放。

1、设置元素为可拖放

让元素可拖动,把 draggable 属性设置为 true 。

eg:

<p id="txt" draggable="true">拖拽文字</p>

2、拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

<p id="txt" draggable="true" ondragstart="drag(event)">拖拽文字</p>

dataTransfer.setData() 方法设置被拖数据的数据类型和值。

1 function drag(e1){ 2     e1.dataTransfer.setData('text',e1.target.id); 3 }

*数据类型是 "Text",值是可拖动元素的 id ("drag1")。

3、放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法。

4、进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

ondrop 属性调用了一个函数,drop(event)。

html :

<div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)"></div>

js:

HTML5--拖放(Drag&Drop)随笔HTML5--拖放(Drag&Drop)随笔
1 function allow(e){ 2  e.preventDefault(); 3 } 4 function drop(e){ 5     var tag=e.dataTransfer.getData('text');                    document.getElementById('box').appendChild(document.getElementById(tag)) 6 }
View Code

HTML5拖放示例

HTML5--拖放(Drag&Drop)随笔HTML5--拖放(Drag&Drop)随笔
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)">
 9         </div>
10         <p id="txt" draggable="true" ondragstart="drag(event)">拖拽文字(添加已定义好的父级元素里)(功能一般为清除的垃圾箱)</p>
11         
12         <script type="text/javascript">
13             function drag(e1){ 14  e1.dataTransfer.setData('text',e1.target.id); 15  } 16             function allow(e){ 17  e.preventDefault(); 18  } 19             function drop(e){ 20                 var tag=e.dataTransfer.getData('text'); 21  document.getElementById('box').appendChild(document.getElementById(tag)) 22  } 23         </script>
24     </body>
25 </html>
View Code

代码解释:

  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素(目标元素)中

转自:w3school.com

 

HTML5--拖放(Drag&Drop)随笔HTML5--拖放(Drag&Drop)随笔
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>Title</title>
  5     <meta charset="utf-8">
  6     <style>
  7         #draggable {
  8             width: 200px;
  9             height: 20px;
 10             text-align: center;
 11             background: white;
 12             margin: 0 auto;
 13         }
 14         .dropzone {
 15             box-sizing: border-box;
 16             width: 400px;
 17             height: 60px;
 18             background: blueviolet;
 19             margin: 10px auto;
 20             padding: 20px;
 21         }
 22     </style>
 23 </head>
 24 <body>
 25 <!--dropzone:表示可释放的区域-->
 26 <div class="dropzone">
 27     <!--可拖动的元素 draggable="true"-->
 28     <div id="draggable" draggable="true" >
 29         来拖动我啊
 30     </div>
 31 </div>
 32 <div class="dropzone"></div>
 33 <div class="dropzone"></div>
 34 <div class="dropzone"></div>
 35 
 36 
 37 <script>
 38     /*储存拖动的目标*/
 39     var dragged;
 40 
 41 
 42     /*开始拖动的时触发。 只触发一次*/
 43     document.addEventListener("dragstart", function (event) {
 44 //        console.log("开始拖动了");
 45         // 保存被拖动的元素对象
 46         dragged = event.target;
 47         // 把拖动元素的该成半透明。
 48         event.target.style.opacity = .3;
 49     }, false);
 50 
 51     /* 拖动的过程中触发。 只要元素在拖动,会一直重复触发 */
 52     document.addEventListener("drag", function (event) {
 53 //        console.log("被拖的感觉真爽")
 54     }, false);
 55 
 56     /*进入另外一个元素的区域时触发*/
 57     document.addEventListener("dragenter", function (event) {
 58         // 判断当前的目标是否进入了潜在的 dropzone区域,如果是则高量这个潜在的目标区域
 59         if (event.target.className == "dropzone") {
 60 //            console.log("进入潜在的目标区域");
 61             event.target.style.background = "purple";
 62         }
 63 
 64     }, false);
 65 
 66     /* 在潜在目标区域的上方的时候会重复触发 */
 67     document.addEventListener("dragover", function (event) {
 68 //        console.log("在潜在的目前区域上方");
 69         // 因为默认情况下,拖放目标是不允许接受元素的。阻值默认行为,可以随时是否元素。
 70         event.preventDefault();  //必须阻止默认行为,否则的后面的drop事件不会触发
 71     }, false);
 72 
 73     /*松开鼠标拖放结束。*/
 74     document.addEventListener("dragend", function (event) {
 75         console.log("拖放结束");
 76         // 把元素的透明重新设置为1
 77         event.target.style.opacity = "1";
 78     }, false);
 79 
 80     /*从潜在目标元素上方离开的时候触发*/
 81     document.addEventListener("dragleave", function (event) {
 82         console.log("离开目标元素");
 83         // 因为进入一个元素的时候更改了目标元素的北京,所以离开的时候要重置背景
 84         if (event.target.className == "dropzone") {
 85             event.target.style.background = "";
 86         }
 87 
 88     }, false);
 89 
 90     /*释放拖动元素的时候触发。  这个事件是在dropend事件触发前触发。*/
 91     document.addEventListener("drop", function (event) {
 92         console.log("drog.....");
 93         // prevent default action (open as link for some elements)
 94         event.preventDefault();
 95         // 把拖动的元素移动目标区域中
 96         if (event.target.className == "dropzone") {
 97             event.target.style.background = "";
 98             //把拖动元素从他原来的父节点中移除。
 99             dragged.parentNode.removeChild(dragged);
100             //插入到目标元素中。
101             event.target.appendChild(dragged);
102         }
103 
104     }, false);
105 </script>
106 </body>
107 </html>
eg2

转自:完善飞跃

 拓展学习--经典例子:

HTML5--拖拽API(含超经典例子):http://blog.csdn.net/baidu_25343343/article/details/53215193

 


HTML5——拖拽相关API及其他学习分享

1、HTML5 Sortable 是一个轻量级排序插件,使用原生的 HTML5拖放 API 创建排序列表和网格。

 2、 Draggabilly 是一个很小的 JavaScript 库,只需要简单的设置参数就可以在你的网站用添加拖放功能。兼容 IE8+ 浏览器,支持多点触摸。可以灵活绑定事件,支持 RequireJS 以及 Bower 安装。中文可参照:http://blog.csdn.net/auven_zj/article/details/74611887。

3、html5和js超实用的拖放UI界面设计

HTML5--拖放(Drag&Drop)随笔

[来自:jQuery之家]
 
2017-11-08