如何拖动一个div（各种元素都类似）

向右看齐 2023-07-15 13:19 16阅读 0赞

如何拖动一个元素  
**思路如下：**

*  鼠标在元素范围里按下：进入拖动状态
 *  鼠标抬起：取消拖动状态
 *  鼠标在拖动状态下移动时：利用transform对元素进行移动
 *  每次移动的位移 = 这次鼠标位置-上次鼠标位置`e.clientX - lastX; e.clientY - lastY`
 *  每次移动完都记录一下上次的位置`translateX,translateY`

**效果：**  
![在这里插入图片描述][20200317142810154.gif]

话不多说，简单实现如下：  
html 和 css很简单：

<div id="my-div"></div>

#my-div{ 
        width: 100px;
        height: 100px;
        background: #EEAA11;
        cursor:move;
    }

**js：**

var myDiv = document.getElementById("my-div");
    var moving = false; //是否进入拖动状态
    //记录上次鼠标位置
    var lastX = null;
    var lastY = null;
    //记录上次移动完的transform位移
    var translateX = 0;
    var translateY = 0;
    
    //鼠标按下，进入拖动状态
    myDiv.onmousedown = function(e) { 
        moving = true;
    }
    
    //鼠标抬起，取消拖动状态
    window.onmouseup = function(e) { 
        if(moving === true) { 
            moving = false;
            lastX = null;
            lastY = null;
        }
    }
    
    //移动过程
    window.onmousemove = function(e) { 
        if(moving) { 
            if(lastX&&lastY) { 
                console.log("onmousemove",moving)
                pX=e.clientX - lastX;
                pY=e.clientY - lastY;
                translateX = translateX + pX;
                translateY = translateY + pY;
                myDiv.style.transform = `translateX(${ translateX}px) translateY(${ translateY}px)`
            }
            lastX = e.clientX;
            lastY = e.clientY;
        }
    }

[20200317142810154.gif]: /images/20230528/015cd6c366644b41a6c94abef267ca48.png

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关如何拖动一个div（各种元素都类似）

如何拖动一个元素思路如下：鼠标在元素范围里按下：进入拖动状态鼠标抬起：取消拖动状态鼠标在拖动状态下移动时：利用transform对元素进行移动

向右看齐/ 2023年07月15日 13:19/ 0 赞/ 17 阅读

相关拖动div元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

蔚落/ 2023年06月01日 12:38/ 0 赞/ 30 阅读

相关 vue拖动元素

工具类 drag.js import Vue from 'vue' // 使用Vue.directive()定义一个全局指令 // 1.参数一：指

你的名字/ 2022年12月23日 13:27/ 0 赞/ 260 阅读

相关 Draggable 拖动元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

妖狐艹你老母/ 2022年12月04日 08:37/ 0 赞/ 205 阅读

相关设置div随意拖动

/ 设置div随意拖动 start / var dragging = false; var iX, iY; $("divID").m

客官°小女子只卖身不卖艺/ 2022年11月14日 10:16/ 0 赞/ 193 阅读

相关可拖动的DIV

<!DOCTYPE html> <html> <head> <title>test</title> <script sr

淡淡的烟草味﹌/ 2022年06月14日 02:18/ 0 赞/ 286 阅读

相关 Dom 可拖动div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

骑猪看日落/ 2022年06月11日 00:00/ 0 赞/ 265 阅读

相关 Jquery 实现div随意拖动

目的：使div可以拖动。注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。需要用的到的插件下载：[https://jqueryui.com/

超、凢脫俗/ 2022年05月19日 06:28/ 0 赞/ 435 阅读

相关 jquery实现两个div中的元素相互拖动

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中： ![watermark_type_ZmFuZ3poZW5naGV

小鱼儿/ 2022年02月03日 15:13/ 0 赞/ 283 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 491 阅读