js实现鼠标拖拽

本文介绍: 需求：鼠标在图片内按下时图片可以跟随盒子动鼠标弹起图片停下来如果图片在box的盒子里面时鼠标弹起了就把图片展示在box里面并且让图片回到起始位置。

鼠标弹起图片停下来

如果图片在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 &amp;&amp; e.clientX < 800 &amp;&amp; e.clientY > 300 &amp;&amp; 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 &amp;&amp; e.clientX < 800 &amp;&amp; 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>