js实现鼠标拖拽

news2024/11/23 13:13:56

css代码

html代码

js代码

完整代码

效果图：

需求：

鼠标在图片内按下时图片可以跟随盒子动

鼠标弹起图片停下来

如果图片在box的盒子里面时鼠标弹起了就把图片展示在box里面并且让图片回到起始位置

css代码

 .div {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        left: 0;
    }

    img {
        width: 100%;
        height: 100%;
    }

    .box {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 300px;
        margin-left: 500px;
    }

html代码

<div class="div">
        <img src="1.jpg" alt="">
    </div>
    <div class="box">

    </div>

js代码

  <script>
      const div = document.querySelector('.div')
      const box = document.querySelector('.box')
      

        //鼠标在div按下
        div.onmousedown = function (e) {
            // 鼠标在按下后，在文档上移动时，盒子跟着
            document.onmousemove = function (e) {
                div.style.top = e.clientY + 'px'
                div.style.left = e.clientX + 'px'
            }
        }
        div.onmouseup = function (e) {
            //把div图片的地址拿到赋值给imgSrc变量
            const imgSrc = e.target.src
            // 判断div只要在box盒子里就把div图片给box
            if (e.clientX > 500 && e.clientX < 800 && e.clientY > 300 && e.clientY < 600) {
                // 动态创建img
                const img = document.createElement('img')
                // 把imgSrc赋值给创建的img的src属性
                box.appendChild(img)
                // 把创建的img添加到box元素
                img.src = imgSrc
                //    div回到原来的位置
                div.style.top = 0
                div.style.left = 0
            }
            // 鼠标弹起时移除鼠标移动事件，让图片停下来
            document.onmousemove = null
        }



    </script>

完整代码

<!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>Document</title>
</head>
<style>
    .div {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        left: 0;
    }

    img {
        width: 100%;
        height: 100%;
    }

    .box {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 300px;
        margin-left: 500px;
    }
</style>


<body>
    <div class="div">
        <img src="1.jpg" alt="">
    </div>
    <div class="box">

    </div>
    <script>
      const div = document.querySelector('.div')
      const box = document.querySelector('.box')
        // 鼠标在图片内按下时 图片可以跟随盒子动
        // 鼠标弹起图片停下来
        // 如果图片在box的盒子里面时鼠标弹起了 就把图片展示在box里面 并且让图片回到起始位置


        //鼠标在div按下
        div.onmousedown = function (e) {
            // 鼠标在按下后，在文档上移动时，盒子跟着
            document.onmousemove = function (e) {
                div.style.top = e.clientY + 'px'
                div.style.left = e.clientX + 'px'
            }
        }
        div.onmouseup = function (e) {
            //把div图片的地址拿到赋值给imgSrc变量
            const imgSrc = e.target.src
            // 判断div只要在box盒子里就把div图片给box
            if (e.clientX > 500 && e.clientX < 800 && e.clientY > 300 && e.clientY < 600) {
                // 动态创建img
                const img = document.createElement('img')
                // 把imgSrc赋值给创建的img的src属性
                box.appendChild(img)
                // 把创建的img添加到box元素
                img.src = imgSrc
                //    div回到原来的位置
                div.style.top = 0
                div.style.left = 0
            }
            // 鼠标弹起时移除鼠标移动事件，让图片停下来
            document.onmousemove = null
        }



    </script>
</body>

</html>