原生拖拽,拖放事件(drag and drop)-优快云博客

本文介绍了一个简单的HTML与JavaScript实现的拖拽元素示例。通过设置元素的draggable属性为true，使得元素可以被拖动，并利用dragstart、dragenter等事件进行交互控制，最终将拖拽的元素放置到指定容器内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo1 {
            margin: 20px;
        }
        #demo1 .panel-list {
            overflow: hidden;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #demo1 .panel-item {
            float: left;
            margin-right: 30px;
            width: 100px;
            height: 100px;
            background: #ddd;
            border: 1px solid #ddd;
        }
        #demo1-src {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: purple;
        }
        #demo1 .over {
            border: 1px dashed #000;
            -webkit-transform: scale(0.8, 0.8);
        }
    </style>
</head>
<body>
<div id="demo1">
    <ul class="panel-list">
        <li class="panel-item"></li>
        <li class="panel-item"></li>
        <li class="panel-item"></li>
        <li class="panel-item"></li>
        <li class="panel-item"></li>
    </ul>
    <h2>拖拽下面的方块到上面任意容器中</h2>

    <!-- 设置draggable使元素成为可拖拽元素 -->
    <span class="movable" id="demo1-src" draggable="true"></span>


    <script>
        (function () {

            var dnd = {
                // 初始化
                init: function () {
                    var me = this;
                    me.src = document.querySelector('#demo1-src');
                    me.panelList = document.querySelector('.panel-list');

                    // 为拖拽源监听dragstart,设置关联数据
                    me.src.addEventListener('dragstart', me.onDragStart, false);

                    // 拖拽鼠标移入元素,在拖放目标上设置视觉反馈
                    me.panelList.addEventListener('dragenter', me.onDragEnter, false);

                    // 取消元素dragover默认行为,使其可拖放
                    me.panelList.addEventListener('dragover', me.onDragOver, false);

                    // 拖拽移出元素,清除视觉反馈
                    me.panelList.addEventListener('dragleave', me.onDragLeave, false);

                    // 鼠标释放,在拖放目标上接收数据并处理
                    me.panelList.addEventListener('drop', me.onDrop, false);
                },
                onDragStart: function (e) {
                    e.dataTransfer.setData('text/plain', 'demo1-src');
                },
                onDragEnter: function (e) {
                    if (e.target.classList.contains('panel-item')) {
                        e.target.classList.add('over');
                    }
                },
                onDragLeave: function (e) {
                    if (e.target.classList.contains('panel-item')) {
                        e.target.classList.remove('over');
                    }
                },
                onDragOver: function (e) {
                    e.preventDefault();
                },
                onDrop: function (e) {
                    var id = e.dataTransfer.getData('text/plain');
                    var src = document.getElementById(id);
                    var target = e.target;
                    if (target.classList.contains('panel-item')) {
                        target.appendChild(src);
                        target.classList.remove('over');
                    }
                }

            };

            dnd.init();
        }());
    </script>
</div>

</body>
</html>