【无标题】

最新推荐文章于 2024-08-03 23:12:36 发布

秦笙依在w

最新推荐文章于 2024-08-03 23:12:36 发布

阅读量88

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_50954460/article/details/128145709

版权

js拖拽功能实现
``

< div draggable=“true” >

拖动时	开始	dragstart
	进行中	drag
	结束	dragend

进入区域	进入时	dragenter
	进行后	dragover
	离开	dragleave
	放置	drop

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽功能实现</title>
    <style>
        .container {
            margin-top: 20px;
            display: flex;
        }

        .show {
            border: 1px solid gray;
            width: 350px;
            text-align: center;
        }

        img[src="./tshirt.jpg"] {
            width: 300px;
            height: 300px;
        }

        .empty,
        .empty>* {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* border: 1px solid red; */
        }

        .patterns {
            border: 1px solid gray;
            flex-direction: column;
            width: 200px;
            text-align: center;
        }

        .patterns>img {
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <section class="container">
        <section class="show">
            <h1>拖动你喜欢的图案到衣服上吧</h1>
            <div style="position: relative;">
                <img src="./tshirt.jpg" alt="shirt">
                <!-- 放置图片的div，初始状态为空 -->
                <div class="empty"></div>
            </div>
        </section>
        <section class="patterns">
            <img draggable="true" src="./img2.jpg" alt="img2">
            <img draggable="true" src="./img3.jpg" alt="img3">
            <img draggable="true" src="./img4.jpg" alt="img4">
        </section>
    </section>
</body>
<script>
    const empty = document.querySelector('div.empty');
    const h1 = document.querySelector('h1');
    let name;

    // 拖动时-进行中，为开始拖拽的时候添加点击事件
    document.addEventListener('dragstart', (e) => {
        // 拖拽图案时，获取图片的alt作为图片name
        name = e.target.alt;
        console.log(name)
    }, false)

    // 拖动时-进行中，为开始拖拽的时候添加点击事件
    document.addEventListener('drag', (e) => {
        // 获取到当前拖拽元素，并添加一个红色断点线的边框
        // console.log(e.target)
        e.target.style.border = '5px dashed red';
        // 拖拽进行时,进入empty时，白t上显示边框提示
        empty.style.border = '5px dashed red';
    }, false)  // useCapture ->默认值false，事件句柄在冒泡阶段执行。true ->事件句柄在捕获阶段执行



    // 拖动时-结束，为拖拽结束的时候添加点击事件
    document.addEventListener('dragend', (e) => {
        // 将添加的边框样式清除
        e.target.style.border = 'none';
        empty.style.border = 'none';
        // 将添加的图片名字进行恢复
        h1.innerText = '拖动你喜欢的图案到衣服上吧';
    }, false)

    // 进入区域-进行时
    empty.addEventListener('dragenter', (e) => {
        // 拖拽图案进入白t时，显示图片名字进行提示
        h1.innerText = name;
        // 如果empty的第一个子元素存在，则移除
        // 如果不这么做，之后的拖拽进来的元素都不会显示
        if (empty.firstChild) {
            empty.removeChild(empty.firstChild);
        }
    })

    // 将图片放置在白t上
    // 进入区域-进行后
    empty.addEventListener('dragover', (e) => {
        // 浏览器默认不能在拖拽进行放置 -> 取消默认行为
        e.preventDefault();
    })
    // 进入区域-放置
    empty.addEventListener('drop', (e) => {
        // 浏览器默认不能在拖拽进行放置 -> 取消默认行为
        e.preventDefault();
        // 获取拖拽元素的dom，然后复制该节点
        let newNode = document.querySelector(`img[alt=${name}]`).cloneNode(true)
        // 将复制好的新节点添加在empty中
        // 如果不使用cloneNode，直接添加的话，原来的图片节点会消失不见
        e.target.appendChild(newNode);
        // 复制节点的时候将样式也一同复制了，所以就一直出现border的边框效果
        // e.target获取的时empty元素，则e.target.firstChild就可以获取到添加的子节点
        // console.log(e.target.firstChild)
        e.target.firstChild.style.border = 'none';
    })
</script>

</html>