JavaScript可拖动DIV

最新推荐文章于 2025-01-15 07:56:15 发布
原创 最新推荐文章于 2025-01-15 07:56:15 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #div #function #ie #class #null

本文介绍了一种使用JavaScript实现网页中DIV元素拖拽效果的方法。通过onmousedown等事件监听及鼠标移动事件处理，实现了DIV元素的自由拖动，并兼容不同浏览器环境。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JavaScript可拖动DIV      
<style>
.fugai{
    position:absolute;
    z-index:100;
    left:0px;
    top:0px;
    filter:alpha(opacity=10); 
    background-color:red;
}
.choose{
    position:absolute;
    z-index:101;
    width:300px;
    height:70px;
    background-color:blue;
}
.move{
    width:300px;
    height:20px;
    cursor:hand;
    background-color:green;
    border:solid black;
}
</style>
<body>
<a href="javascript:void(null);" onclick="show();" id="address">选择地点</a>
<div id="fugai" class="fugai" style="display:none;">
</div>
<div id="ch" style="display:none;left:50px;top:20px;" class="choose">
    <div class="move" onmousedown="move(this.parentNode,event);";>拖动我</div><br>
    <a href="javascript:void(null);" onclick="choose('北京');">北京</a>&nbsp;&nbsp;
    <a href="javascript:void(null);" onclick="choose('南京');">南京</a>&nbsp;&nbsp;
</div>
</body>
<script>
    function show(){
        document.getElementById("fugai").style.display="";
        document.getElementById("fugai").style.width=document.body.clientWidth;
        document.getElementById("fugai").style.height=document.body.clientHeight;
        document.getElementById("ch").style.display="";
        document.getElementById("ch").style.left="50px";
        document.getElementById("ch").style.top="20px";
    }
    function choose(value){
        document.getElementById("fugai").style.display="none";
        document.getElementById("ch").style.display="none";
        document.getElementById("address").firstChild.data=value;
    }
    function move(element,event){
        var x=parseInt(element.style.left);
        var y=parseInt(element.style.top);

        var deltaX=event.clientX-x;
        var deltaY=event.clientY-y;
        //添加临时事件
        if(document.addEventListener){//2级DOM
            document.addEventListener("mousemove",moveHandler,true);
            document.addEventListener("mouseup",upHandler,true);
        }else if(document.attachEvent){//IE5+
            document.attachEvent("onmousemove",moveHandler);
            document.attachEvent("onmouseup",upHandler);
        }else{//IE4
            var oldonmousemove=document.onmousemove;
            var oldonmouseup=document.onmouseup;
            document.onmousemove=moveHandler;
            document.onmouseup=upHandler;
        }
        //我们处理该事件,不让其他元素见到它
        if(event.preventDefault){//2级DOM
            event.preventDefault();
        }else{//IE
            event.returnValue=false;
        }

        //鼠标移动事件
        function moveHandler(e){
            if(!e){//IE
                e=window.event;
            }

            element.style.left=(e.clientX-deltaX)+"px";
            element.style.top=(e.clientY-deltaY)+"px";
            if(e.stopPropagation){//2级DOM
                e.stopPropagation();
            }else{//IE
                e.cancelBubble=true;
            }
        }
        //鼠标按键弹起
        function upHandler(e){
            if(!e){
                e=window.event;
            }
            if(document.removeEventListener){//2级DOM
                document.removeEventListener("mouseup",upHandler,true);
                document.removeEventListener("mousemove",moveHandler,true);
            }else if(document.detachEvent){//IE5+
                document.detachEvent("onmouseup",upHandler);
                document.detachEvent("onmousemove",moveHandler);
            }else{//IE4
                document.onmouseup=oldonmouseup;
                document.onmousemove=oldonmousemove;
            }
            if(e.stopPropagation){//2级DOM
                e.stopPropagation();
            }else{//IE
                e.cancelBubble=true;
            }
        }
    }
</script>
  
js拖动、拖拽div大小,完美实现版
12-16
js拖动 拖拽div大小，内部随意文件操作。完美实现版
Javascript可拖动的模式窗口
我的世界我的梦
04-17 2976
虽然JQuery有很多类似的插件，我也试过好多个，一直都没有找到一个适合自已的，总是感觉使用不能满足我的要求。Javascript的浮动窗口已经是很老的应用，但网上很少有兼容性很好，使用又方便的功能，有的往往只是支持IE，而且问题多多，不方便应用到具体的项目中。最近我的项目里面又需要用到这个东西，以前自已都是直接写脚本来实现，但这次用到的地方比较多，所以只有写成一个插件的型式以方便多个地方调用。这
JavaScript实现拖动div盒子
2302_80695016的博客
08-07 292
拖拽功能
使用JS制作一个鼠标可拖的DIV_js可以拖动的div
最新发布
2401_89829360的博客
01-15 729
*******************以上方法是在鼠标按下事件里 onmousedown ******************//*******************以下方法是在鼠标按下事件里 onmousemove ******************/结束 X 坐标 = 开始 X 坐标 + 容器的宽度 - 拖动 DIV 元素的宽度。结束 Y 坐标 = 开始 Y 坐标 + 容器的高度 - 拖动 DIV 元素的高度。//开始 X 坐标。//开始 Y 坐标。//结束 X 坐标。//结束 Y 坐标。
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
Javascript简单实现可拖动的div
10-26
在本示例中，使用了JavaScript来实现一个可拖动的div。以下是关键技术点和知识点的详细解释。 首先，基本的页面结构包含了一个简单的HTML文档，它有一个绝对定位的div元素，具有初始位置和尺寸。该div的样式通过...
JavaScript拖动层Div代码
10-20
JavaScript拖动层Div是网页开发中的一个常见功能，它允许用户通过鼠标拖动来改变Div元素的位置。在本文中，我们将深入探讨如何实现这个功能，以及相关的核心代码和原理。 首先，实现JavaScript拖动层Div的基本步骤...
使用JS制作一个鼠标可拖的DIV
2401_84093837的博客
04-09 1235
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-N4KWb4YC-1712595445336)][外链图片转存中…(img-EpK48LHz-1712595445337)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-vdZkSe3V-1712595445337)]
html js设置div可拖动效果
weixin_40841731的博客
02-24 8256
第一种：先看代码，可直接复制使用。 这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。 问题：js设置div可拖动效果  当我在实际项目中使用时，div里有关闭div的按钮，很多时候点击按钮，关闭事件不触发，反而div会移动。因为该div是js动态生成了，我尝试使用阻止冒泡事件来解决这个问题，但是不起作用。于是换了另一种方式。如下第二种 &lt;!doctype html&gt;...
JavaScript实现拖动窗口功能详解
weixin_35755823的博客
09-09 1790
本文还有配套的精品资源，点击获取 简介：本教程深入讲解了如何通过JavaScript实现拖动窗口功能，涵盖了原生方法和面向对象（OOP）的封装技术，以及确保代码在主流浏览器（包括IE6、Firefox和Chrome）中的兼容性。教程提供详细代码示例，从基础的原生拖动方法到利用OOP封装的Droppable类，再到特殊浏览器的兼容性处理，使读者能够掌握全面的拖动窗口实现技巧。...
js实现div拖动
src_chao1的博客
02-13 4129
大致思路： 鼠标按下并且移动的时候，使得鼠标点击的div跟随鼠标移动，松开按键或者鼠标移开div时，div不跟随移动。而图层跟随鼠标移动只需要计算出鼠标的移动位置相对于鼠标按下时的原位置，就可以得到偏移量，再用图层的原位置减去偏移量，就是图层的移动后位置。所以大致分为三个步骤。 首先，鼠标的按下事件 let flag = 0; //确定该图层是否鼠标处于按下状态 let oldMX = 0 //鼠标的原X位置 let oldMY = 0 //鼠标的原Y...
JS实现DIV的拖动
qq_51076413的博客
05-26 1332
html中实现DIV的拖动功能，JS实现DIV的拖动
第三十一天 用js写一个可以拖动的div
王恒涛
06-07 5014
无论如何，先感谢一下我的同事，而且还是妹子，为了帮我，给我写了一个这个可拖动的div的代码，所有的代码都是用hbuilder工具写的，工具可以自己去百度搜索。 这个是给我基础测试题的哪个实习生教我的，我的思路一直在增加监听事件哪块。但是，别人一说我突然恍然大悟，原来还是可以通过事件绑定到对应的js就可以了,，感觉自己的思路不对，解决问题的思路不对，很多事情要做过之后才能懂，其实很多时候看书就是通
JS+DIV 实现拖动效果
热门推荐
mixi9760的博客
07-28 1万+
效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="main" style="background-color: aqua;width: 100px;hei
js实现拖动div元素（js实现元素拖动）
Web前端工程师
10-17 1万+
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽div<...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4292
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
Javascript打造可拖动Div交互体验
在可拖动Div控件的实现中，Javascript用来监听用户的拖拽事件，并实时更新Div元素的位置。事件监听和DOM操作是实现此功能的核心。 三、实现可拖动Div控件的原理 1. 鼠标事件：为了实现拖拽效果，我们需要处理几个...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值