js实现拖拽事件

「爱情、让人受尽委屈。」 2022-05-29 08:24 299阅读 0赞

#### HTML ####

<body> 
         <div></div>
    </body>

#### CSS ####

div{ position: absolute; width: 200px; height: 200px; background: #369 }

#### JS ####

window.onload = function(){
        var oDiv = document.getElementsByTagName("div")[0];
    
        /*鼠标点击的位置距离DIV左边的距离 */
        var disX = 0;
        /*鼠标点击的位置距离DIV顶部的距离*/
        var disY = 0;
        oDiv.onmousedown = function(){
            var e = e || window.event;
            disX = e.clientX - oDiv.offsetLeft;
            disY = e.clientY- oDiv.offsetTop;
    
            document.onmousemove = function(e){
                var e = e || window.event;
                // 横轴坐标
                var leftX = e.clientX - disX;
                // 纵轴坐标
                var topY =e.clientY - disY;
    
                if( leftX < 0 ){
                    leftX = 0;
                }
                /* 获取浏览器视口大小 document.document.documentElement.clientWidth*/
                else if(  leftX > document.documentElement.clientWidth - oDiv.offsetWidth ){
                    leftX = document.document.documentElement.clientWidth - oDiv.offsetWidth;
                }
    
                if( topY < 0 ){
                    topY = 0;
                }
                else if( topY > document.documentElement.clientHeight -oDiv.offsetHeight ){
                    topY = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                oDiv.style.left = leftX + "px";
                oDiv.style.top = topY+"px";
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
     }

发表评论取消回复

表情：

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

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

相关阅读

相关前端------拖拽事件

拖拽事件在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。放置元素:默认是不可以放置得取消默认行为 even

阳光穿透心脏的1/2处/ 2024年04月07日 11:39/ 0 赞/ 84 阅读

相关 Qt实现鼠标拖拽事件

Qt实现鼠标拖拽事件鼠标拖拽是一种常见的用户交互操作，它允许用户通过按下鼠标左键并移动来拖动对象或改变窗口大小。在Qt框架中，我们可以轻松地实现鼠标拖拽事件。本文将介绍如何

骑猪看日落/ 2024年03月09日 03:01/ 0 赞/ 122 阅读

相关 JS 拖拽事件

1.drag等拖拽事件 > 拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。被拖动元素的相关事件如下所示：被拖动元素相关事件:

蔚落/ 2024年03月02日 10:40/ 0 赞/ 64 阅读

相关 JS实现窗口拖拽

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

ゞ浴缸里的玫瑰/ 2023年07月24日 08:12/ 0 赞/ 53 阅读

相关 js拖拽

拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起

怼烎@/ 2023年06月09日 04:59/ 0 赞/ 7 阅读

相关 UGUI拖拽事件的实现

UGUI 自带有拖拽事件,我们具体来实现看看,为了便于理解,我尽量去除不必要的代码. 第一步:继承3个接口:IBeginDragHandler,IDragHandler,IE

谁借莪１个温暖的怀抱￠/ 2022年07月14日 10:52/ 0 赞/ 220 阅读

相关 js实现拖拽事件

HTML <body> <div></div> </body> CSS div{ position: absolute

「爱情、让人受尽委屈。」/ 2022年05月29日 08:24/ 0 赞/ 300 阅读

相关 JS 拖拽

实现后效果 ![70][] 实现原理： 1. 在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发 2. 监听mousemov

╰半夏微凉°/ 2022年05月22日 08:50/ 0 赞/ 327 阅读

相关 JS基础-事件的拖拽

1.事件的拖拽拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。（onmousedown）;2.当鼠标移动时被拖拽的元素随鼠标移动。(onmousemove);3.当鼠

缺乏、安全感/ 2022年04月23日 09:02/ 0 赞/ 250 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 475 阅读