HTML5教程拖拽drag、拖放drop事件浅析-职坐标

HTML5教程拖拽drag、拖放drop事件浅析

沉沙 2018-06-12 来源：阅读 1447 评论 0

摘要：本篇HTML5教程讲解了拖拽drag和拖放drop事件，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

拖拽流程

一个完整的drag and drop流程通常包含以下几个步骤:

1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
2.监听dragstart，通过DataTransfer设置拖拽数据
3.为拖拽操作设置反馈图标(可选)
4.设置允许的拖放效果，如copy,move,link
5.设置拖放目标，默认情况下浏览器阻止所有的拖放操作，所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
6.监听drop事件执行所需操作

拖拽事件

以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.

dragstart：拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
dragenter：拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
dragover：拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
dragleave：拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
drag：拖拽期间在被拖拽元素上连续触发
drop：鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
dragend：鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

结合实例在线效果体验：drag-demo

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>拖动</title>
    <style>
        h2 {
            font-size: 20px;
            color: #0d88c1;
        }
 
        div#left,
        div#right {
            width: 120px;
            float: left;
            margin: 10px 100px 10px 0px;
            height: 240px;
            background-color: #dddddd;
            overflow-y: auto;
        }
 
        div label {
            font-size: 22px;
            font-weight: bold;
            width: 100%;
            display: inline-block;
            padding: 4px 0;
            text-align: center;
            margin: 0px 0 2px 0;
            color: #fff;
            background-color: #0d88c1;
        }
        .over {
            border: 1px dashed red;
            box-sizing: border-box;
        }
    </style>
</head>
 
<body>
    <h2>拖放（Drag 和 drop）</h2>
    <!-- 左边元素框 -->
    <div id="left">
        <label draggable="true">index1</label>
        <label draggable="true">index2</label>
        <label draggable="true">index3</label>
        <label draggable="true">index4</label>
        <label draggable="true">index5</label>
        <label draggable="true">index6</label>
        <label draggable="true">index7</label>
    </div>
    <!-- 右边元素框 -->
    <div id="right"></div>
    <script>
        var moveItem = document.getElementsByTagName('label');
 
        for (let i = 0; i < moveItem.length; i++) {
            //动态设置label元素id
            moveItem[i].setAttribute('id', 'label' + i);
            moveItem[i].ondragstart = function (ev) {
                //dataTransfer.setData() 方法设置被拖数据的数据类型和值
                ev.dataTransfer.setData("id", this.id);
            };
        }
        document.getElementById('right').ondragover = function (ev) {
            ev.preventDefault(); //阻止向上冒泡
        }
        document.getElementById('right').ondragenter = function (ev) {
            ev.target.classList.add('over')
        }
        document.getElementById('right').ondragleave = function (ev) {
            ev.target.classList.remove('over')
        }
        document.getElementById('right').ondrop = function (ev) {
            ev.preventDefault();
            ev.target.classList.remove('over')
            var id = ev.dataTransfer.getData('id');
            var elem = document.getElementById(id); //当前拖动的元素
            var toElem = ev.toElement.id; //放置位置
            if (toElem == 'right') {
                //如果为container,元素放置在末尾
                this.appendChild(elem);
            } else {
                //如果为container里的元素，则插入该元素之前
                this.insertBefore(elem, document.getElementById(toElem));
            }
        }
 
        document.getElementById('left').ondragover = function (ev) {
            ev.preventDefault(); //阻止向上冒泡
        }
        document.getElementById('left').ondragenter = function (ev) {
            ev.target.classList.add('over')
        }
        document.getElementById('left').ondragleave = function (ev) {
            ev.target.classList.remove('over')
        }
        document.getElementById('left').ondrop = function (ev) {
            ev.preventDefault();
            ev.target.classList.remove('over')
            var id = ev.dataTransfer.getData('id');
            var elem = document.getElementById(id);
            var toElem = ev.toElement.id;
            if (toElem == 'left') {
                //如果为container,元素放置在末尾
                this.appendChild(elem);
            } else {
                //如果为container里的元素，则插入该元素之前
                this.insertBefore(elem, document.getElementById(toElem));
            }
        }
    </script>
</body>
 
</html>

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5+css3从入门到精通pdf html5css3教程下载 html5教程网盘

本文由 @沉沙发布于职坐标。未经许可，禁止转载。