HTML5拖拽

WEB前端 waitig 487℃ 百度已收录 0评论
<!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->dragend
drop触发的时候(dragover阻止默认事件):
    dragstart->drag->dragenter->dragover->drop->dragend

解决火狐下的问题:
    必须设置dataTransfer对象的setData方法拖拽除图片外的其他标签

dataTransfer对象
    setData():设置key和value(必须是字符串)
    getData():获取,根据key,得到相应的value
    effectAllowed:设置光标的样式,当拖拽时光标的样子
    setDragImage():拖拽的对象,需要三个参数,一个拖拽的对象,另外两个是拖拽时的鼠标的坐标位置

 -->

本文由【waitig】发表在等英博客
本文固定链接:HTML5拖拽
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)