HTML5拖拽

来源：互联网发布：数据库一致性错误修复编辑：程序博客网时间：2024/06/08 09:47
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拖拽</title>    <style type="text/css">        li{list-style:none;width: 100px;height: 30px;background: yellow;margin: 10px;}        #div1{width: 100px;height: 100px;background: red;margin: 200px;}    </style>    <script type="text/javascript">    window.onload=function(){        var oUl=document.getElementsByTagName('ul')[0];        var aLi=oUl.getElementsByTagName('li');        var oDiv=document.getElementById('div1');        var i=0;        for (var i = 0; i < aLi.length; i++) {            aLi[i].index=i;            aLi[i].ondragstart=function(ev){                var ev=ev||window.event;                ev.dataTransfer.setData('name','hello');                ev.dataTransfer.effectAllowed='link';                this.style.background='green';//拖拽前触发            }            aLi[i].ondrag=function(){                document.title=i++;//开始与结束连续触发            }            aLi[i].ondragend=function(){                this.style.background='yellow';//拖拽后触发            }        }        oDiv.ondragenter=function(){            this.style.background='bule';        };        oDiv.ondragover=function(ev){            document.title=i++;            //要想触发drop事件，就必须在dragover中阻止默认事件            ev.preventDefulte();        };        oDiv.ondragleave=function(){            this.style.background='red';        };        oDiv.ondrog=function(ev){            // alert(123);            //             //alert(ev.dataTransfer.getData('name'));            //            // oUl.removeChild(aLi[ev.dataTransfer.getData('name')]);            // for (var i = 0; i < aLi.length; i++) {            //  aLi[i].index=i;            // }        };    };    </script></head><body>    <ul>        <li draggable="true">a</li>        <li draggable="true">b</li>        <li draggable="true">c</li>    </ul>    <div id="div1"></div></body></html><!-- 拖拽事件draggable    设置为true,元素就可以拖拽拖拽元素事件：事件对象为被拖拽元素  此例被拖拽的元素是li    dragstart:拖拽前触发   （因为是事件，所以要加on）    dragend：拖拽后触发    drag:开始与结束连续触发目标元素事件：事件对象为目标元素    dragenter:进入目标元素触发，相当于mouseover    dragleave：离开目标元素触发，相当于mouseout    dragover:进入目标，离开目标。连续触发    drop: 在目标元素上鼠标抬起时触发事件执行的顺序：drop不触发的时候：    dragstart->drag->dragenter->dragover->dragleave->dragenddrop触发的时候（dragover阻止默认事件）:    dragstart->drag->dragenter->dragover->drop->dragend解决火狐下的问题：    必须设置dataTransfer对象的setData方法拖拽除图片外的其他标签dataTransfer对象    setData():设置key和value（必须是字符串）    getData():获取，根据key，得到相应的value    effectAllowed:设置光标的样式，当拖拽时光标的样子    setDragImage():拖拽的对象，需要三个参数，一个拖拽的对象，另外两个是拖拽时的鼠标的坐标位置 -->
阅读全文
0 0