JS实现博客前端页面（五） —— 封装弹窗拖拽事件

mozillazg 发布于2019-08-22 10:38 / 1410人阅读

摘要：在实现博客前端页面四中已经实现了对弹窗组件的封装，现在我们想要在浏览器窗口内可以对弹窗进行拖拽移动，就需要封装拖拽事件。

在JS实现博客前端页面（四）中已经实现了对弹窗组件的封装，现在我们想要在浏览器窗口内可以对弹窗进行拖拽移动，就需要封装拖拽事件。

拖拽的原理

首先我们需要了解拖拽的原理，大致分为如下几个步骤：

将鼠标移动到需要拖拽的物体上，按下鼠标，触发onmousedown事件；

按住鼠标的同时，选中物体，并进行拖动，触发onmousemove事件；

放开鼠标，停止拖动，物体会停留在最后的位置，触发onmouseup事件；

再次按下鼠标，会重复循环以上操作。

注意：onmousedown按下事件只在物体对象范围内起作用，此处指定对象为窗体loginBox即可;
但窗体的onmousemove、onmouseup事件则需在整个页面文档范围内起作用，应该指定对象为document.

拖拽事件封装

在base.js中封装drag()拖拽事件，代码如下：

Base.prototype.drag = function(){
    for (var i=0;i window.InnerWidth - that.offsetWidth){
                     left = window.InnerWidth - that.offsetWidth;
                 } 
                //窗体距上的偏移量加上窗体自身的高度不超过浏览器的高度
                 if(top < 0){
                     top = 0;
                 }else if(top > window.InnerHeight - that.offsetHeight){
                     top = window.InnerHeight - that.offsetHeight;
                 }
                //设置窗体移动后的偏移量
                 that.style.left = left + "px";
                 that.style.top = top + "px"; 
             }
             
             //鼠标放开事件
             document.onmouseup = function(){
                 //清空事件
                 this.onmousemove = null;//这里的this指向document对象
                 this.onmouseup = null;

             } 
        
         };
    }
    return this;
}

前台调用

window.onload = function () { 
    var loginBox=$().getId("loginBox");//获取窗体
     //拖拽窗体
     loginBox.drag();
};

GPU云服务器云服务器 js拖拽事件视频前端js 弹窗 js实现数据拖拽原生js实现拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90981.html

element-ui dialog组件添加可拖拽位置可拖拽宽高

摘要：最近公司新加需求实现弹窗可拖拽还要拖拽宽高变化国际惯例先上图浏览器下作的有几个点需要注意一下每个弹窗都要有唯一可操作指令可以做到拖拽时要添加可拖拽区块由于组件在设计时宽度用了百分比这里不同浏览器有兼容性问题实现拖拽宽高时获取边缘问题定位设最近公司新加需求, 实现弹窗可拖拽, 还要拖拽宽高变化. 国际惯例先上图: edge浏览器下作的gif http://www.lano...

jzman 2021-09-01 14:21 评论0 收藏0
实现element-ui对话框可拖拽功能

摘要：对话框可拖拽及边界处理应业务需求，需要实现对话框可拖拽问题，应没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。在实现的功能的情况下，封装成了文件，然后再中引入后可全局使用。 element-ui对话框可拖拽及边界处理应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码...

qc1iu 2019-08-26 12:13 评论0 收藏0
jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

摘要：随后会陆续发布及相关版本的插件。这和图片查看器的操作方式是相同的。目前的调整大小存在一点，但不影响整体的使用。键盘控制和照片查看器的按键是一样的。除了照片查看器，的图片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言因为一些特殊的业务需求，经过一个多月的蛰...

anyway 2019-08-01 18:17 评论0 收藏0
jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

摘要：随后会陆续发布及相关版本的插件。这和图片查看器的操作方式是相同的。目前的调整大小存在一点，但不影响整体的使用。键盘控制和照片查看器的按键是一样的。除了照片查看器，的图片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言因为一些特殊的业务需求，经过一个多月的蛰...

chaosx110 2019-08-29 14:06 评论0 收藏0