h5拖放-基础知识

 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <style>         li{             list-style: none;             width: 100px;             height: 30px;             background: red;         }         div {             width: 100px;             height: 50px;             background: blue;             margin: 200px;         }     </style> </head> <body>     <!-- 拖放：     1.draggable:true（可拖拽）/false（默认）;         ①在chorme/safari下可拖拽，但拖拽出来的是元素的副本，并且带有禁止标志，元素还是在原地；其他浏览器没反应（ie很诡异）；     2.拖放事件：         ①拖放元素事件：事件对象为被拖拽元素；             Ⅰdragstart:拖放前触发（按下去的时候是不会触发的，而一拖放的那一刻就触发了）；             Ⅱdrag:拖拽开始与拖拽结束之间连续触发（与原生js中的onmousemove不同的是，onmousemove是鼠标移动的时候才触发，而drag是只要在开始与结束之间，不论鼠标动与不动，都在连续触发）；             Ⅲdrageng:拖放结束触发(即鼠标按键抬起的一刻);         ②目标元素事件：事件对象为目标元素；             Ⅰdragenter:移入目标元素的时候触发，相当于onmouseover，区别在于子级不会影响到父级；             Ⅱdragover:在dragenter和dragleave之间连续触发，相当于drag，只是对象不同而已；             Ⅲdragleave：移除目标元素的时候触发，相当于onmouseout，区别在于子级不会影响到父级；             Ⅳdrop:在目标元素上释放鼠标触发(前提是必须要阻止ondragover的默认事件)--除了ff；     3.事件的执行顺序：         ①drop不触发的时候：-dragstart>drag>dragenter>dragover>dragleave>dragend;         ②drap触发的时候(drapover的时候阻止默认事件)：dragstart>drag>dragenter>dragovr>drop>dragend     4.不能释放的光标样式和能释放的光标样式不一样；     -->     <ul>         <li draggable="true">111</li>         <li draggable="true">222</li>         <li draggable="true">333</li>     </ul>     <div id="div"></div>     <script>         var aLi=document.getElementsByTagName('li');         var oDiv=document.getElementById('div');         for(var i =0;i<aLi.length;i++){             aLi[i].ondragstart= function () {                 this.style.background='blue';             };             aLi[i].ondrag= function () {                 //document.title=i++;             }             aLi[i].ondragend= function () {                 this.style.background='red';             }         }         oDiv.ondragenter= function () {             this.style.background='red';         };         oDiv.ondragover= function (ev) {             document.title=i++;             ev=ev||event;             ev.preventDefault();             //return false;         }         oDiv.ondragleave= function () {             this.style.background='blue';         }         oDiv.ondrop= function () {             alert(123);         }     </script> </body> </html>
个人收藏笔记记录

开通VIP
