JS_让div在body中可以任意拖动

绝地灬酷狼 2022-12-15 14:23 140阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]

html代码：

<div id="idOuterDiv" class="CsOuterDiv">
    </div>

css代码：

body { 
    	background-color:#000;
    }
    .CsOuterDiv { 
    	width:256px;
    	height:146px;
    	background-color:white;
    	position:absolute;
    	top:50%;
    	left:50%;
    	transform:translateX(-50%) translateY(-50%);
    	-moz-transform:translateX(-50%) translateY(-50%);
    	-webkit-transform:translateX(-50%) translateY(-50%);
    	-ms-transform:translateX(-50%) translateY(-50%);
    	border-radius:5px;
    	box-shadow:3px 3px  10px blue;
    }

js代码：

function dragFunc(id) { 
        var Drag = document.getElementById(id);
        Drag.onmousedown = function(event) { 
            var ev = event || window.event;
            event.stopPropagation();
            var disX = ev.clientX - Drag.offsetLeft;
            var disY = ev.clientY - Drag.offsetTop;
            document.onmousemove = function(event) { 
                var ev = event || window.event;
                Drag.style.left = ev.clientX - disX + "px";
                Drag.style.top = ev.clientY - disY + "px";
                Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function() { 
            document.onmousemove = null;
            this.style.cursor = "default";
        };
    };
    dragFunc("idOuterDiv");

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/280349d16e2e406f9cb4f6e2819f10d3.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js时实现鼠标拖动div

实现js拖动div 实现步骤： 1. 鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移； 2. 鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置

清疚/ 2023年07月24日 05:37/ 0 赞/ 27 阅读

相关拖动div元素

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

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

相关 js设置div在body中可以任意拖动

js代码： function dragFunc() { var Drag = document.getElementById(divId);

以你之姓@/ 2022年12月19日 15:24/ 0 赞/ 179 阅读

相关 JS_让div在body中可以任意拖动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

绝地灬酷狼/ 2022年12月15日 14:23/ 0 赞/ 141 阅读

相关 JS+DIV 实现拖动效果

效果图思路代码优化封装以及解决拖动问题事件捕获效果图 ![这里写图片描述][201607281930450

待我称王封你为后i/ 2022年09月24日 10:19/ 0 赞/ 243 阅读

相关 31、JavaScript中,让一个div在固定的父div中任意拖动

1、css代码 <style> big { border: 1px solid FF3300; width: 300px

ゝ一世哀愁。/ 2022年09月21日 11:51/ 0 赞/ 170 阅读

相关 JS_无限dome任意拖动

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5

深藏阁楼爱情的钟/ 2022年09月14日 13:26/ 0 赞/ 256 阅读

相关 JS_js实现拖动DIV交换位置

![在这里插入图片描述][24d29df1f64bd6d02bfb602b30daa026.gif_pic_center] <!DOCTYPE html> <

怼烎@/ 2022年09月11日 05:28/ 0 赞/ 216 阅读

相关 html js设置div可拖动效果

第一种：先看代码，可直接复制使用。这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。问题：js设置div可拖动效果当我在实际项目中使用时，div里有关闭d

灰太狼/ 2022年03月17日 12:52/ 0 赞/ 654 阅读

相关 js 鼠标拖动div

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

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