H5 的 Draggable 属性
HTML5提供专门的拖拽与拖放的API,
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :< li draggable="true"> aaaa</li> 否则不会有效果
二、相关重点
- dataTransfer 对象:拖拽对象用来传递的媒介,使用一般为Event.dataTransfer。 在 event对象下
- draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,
- //drag的顺序:
- ondragstart 事件: 当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
- ondrag 事件: 在dangstart 和 dargend 之间发生的, 此事件作用在被拖曳元素上
- ondragenter 事件: 拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
- ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
- ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
- ondragleave 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上 (一般 有了 drop就没有dragleave 事件 )
- ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
- Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
- event.dataTransfer.effectAllowed 属性:就是拖拽的效果,拖拽时光标的样式。
- evnet.dataTransfer.setDragImage(odiv,0,0); 拖拽时的影像 是 odiv ,鼠标指在odiv的 0,0处(左上角)
解决Firefox 浏览器下的问题:
必须设置 dataTransfer 对象的setData方法 才能拖拽图片以外的其他标签
dataTransfer.setData() 方法 设置被拖数据的数据和值(key和 value)必须 是字符串, dataTransfer.getData() 方法 根据 key 获取value的 值
下面是一个简单的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE> <html> <head> <meta charset= "utf-8" > <style type= "text/css" > li{ height: 20px; width: 100px; background: #e3f; margin: 20px; list-style: none; } div{ margin-top: 200px; width: 100px; height: 100px; background: red; } </style> <title>ni</title> <script type= "text/javascript" > window.onload = function (){ var j = 0; var ul = document.getElementsByTagName( "ul" )[0]; var lis = document.getElementsByTagName( "li" ); var put = document.getElementById( "put" ); for ( var i = 0; i < lis.length; i++) { lis[i].index = i; lis[i].ondragstart = function (ev){ var ev = ev||window.evnet; ev.dataTransfer.setData( "index" , this .index); this .style.backgroundColor = "#9f9" ; } lis[i].ondrag = function (){ this .style.backgroundColor = "#ff9" ; } lis[i].ondragend = function (){ this .style.backgroundColor = "#931" ; } }; put.ondragenter = function (){ this .style.backgroundColor = "black" ; } put.ondragover = function (ev){ ev.preventDefault(); this .style.backgroundColor = "blue" ; } put.ondragleave = function (){ this .style.backgroundColor = "#931" ; } put.ondrop = function (ev){ var ev = ev || window.evnet; this .style.backgroundColor = "#999" ; ev.target.appendChild(lis[ev.dataTransfer.getData( "index" )]); //ul.removeChild(lis[ev.dataTransfer.getData("index")]); 加了这句话反而出问题,appendChild(e) 就是剪切的,当添加了子元素 e 后,会把原来的元素 e 给删除了 for ( var i = 0; i < lis.length; i++) { lis[i].index = i; }; } } </script> </head> <body> <ul> <li draggable= "true" >aaaaa</li> <li draggable= "true" >bbbbb</li> <li draggable= "true" >ccccc</li> </ul> <div id= "put" ></div> </body> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步