HTML5拖拽

最新推荐文章于 2021-06-20 19:20:14 发布

原创最新推荐文章于 2021-06-20 19:20:14 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

前端的尘封往事专栏收录该内容

29 篇文章

订阅专栏

<!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():拖拽的对象，需要三个参数，一个拖拽的对象，另外两个是拖拽时的鼠标的坐标位置

 -->