js实现鼠标拖拽

目录

css代码

html代码

js代码

完整代码

效果图:


需求:

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

鼠标弹起图片停下来

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

css代码

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代码

html 复制代码
<div class="div">
        <img src="1.jpg" alt="">
    </div>
    <div class="box">

    </div>

js代码

javascript 复制代码
  <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>

完整代码

html 复制代码
<!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>

效果图:

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
前端君3 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_918126914 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光5 小时前
css之一个元素可以同时应用多个动画效果
前端·css