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>

效果图:

相关推荐
南雨北斗10 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪11 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss34 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海34 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手36 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪39 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪40 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__42 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工1 小时前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主1 小时前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端