原生js实现拖拽

最新推荐文章于 2023-01-04 11:45:11 发布

良纵

最新推荐文章于 2023-01-04 11:45:11 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/qq_33807889/article/details/104948728

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {}

        .zone {
            width: 200px;
            height: 20px;
            background: blueviolet;
            padding: 10px;
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item {
            width: 200px;
            height: 20px;
            text-align: center;
            background: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="zone">
            <div class="item" draggable="true">item</div>
        </div>
        <div class="zone"></div>
        <div class="zone"></div>
        <div class="zone"></div>
    </div>

    <script>
        window.onload = function () {
            var item;
            document.addEventListener('drag', function (e) {
                e.preventDefault();
            }, false)

            document.addEventListener('dragstart', function (e) {
                item = e.target;
                e.target.style.opacity = 0.5;
            }, false)
            document.addEventListener('dragend', function (e) {
                e.target.style.opacity = "";
            }, false)

            document.addEventListener('dragover', function (e) {
                e.preventDefault();
            }, false)

            document.addEventListener('dragenter', function (e) {
                if(e.target.className==="zone"){
                    e.target.style.background="red";
                }
            }, false)

            document.addEventListener('dragleave', function (e) {
                if(e.target.className==="zone"){
                    e.target.style.background="";
                }
            }, false)

            document.addEventListener('drop', function (e) {
                if(e.target.className==="zone"){
                    e.target.style.background="";
                    item.parentNode.removeChild(item);
                    e.target.appendChild(item);
                }
            }, false)
        }
    </script>
</body>

</html>

tips

如果还不清楚或者想交个朋友的同学可以微信联系我：qq981145483（备注:csdn）

良纵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
复制链接

扫一扫