正文

原生js实现弹出窗口的拖拽（直接copy可用）

codingHeart  2022-02-09  364

关键词：

　　上一篇说了一下弹出窗口功能的实现思路，一般情况下紧接着就会需要做到弹窗的移动，当然现在有很插件、库比如hammer可以使用，效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式，如下：

　　思路：拖动这个操作起始分为三个部分：

鼠标左键按下，此时才开始可以拖动；
鼠标移动，拖动开始；根据光标的移动给div相对应的纵轴、横轴的偏移；
鼠标左键松手，拖动结束，不可以再拖动了。

　　每一步需要做的事：

　　1中需要将初始化的拖动标示量置为true（可以拖动了）、记录光标起始坐标和div的起始坐标

　　2中记录光标移动量，并将光标偏移量实时反映到div的坐标位置中去，div坐标实时同步光标移动，从而达到拖动效果

　　3拖动标示量置为false（不可以拖动了）

具体实现拖拽的JS代码：

function DivMove(divId, h2Tag) {
        var oWin = document.getElementById(divId);
        var oH2 = oWin.getElementsByTagName(h2Tag)[0];
        var bDrag = false;
        var disX = disY = 0;
        oH2.onmousedown = function (event) {
            var event = event || window.event;
            bDrag = true;
            disX = event.clientX - oWin.offsetLeft;
            disY = event.clientY - oWin.offsetTop;
            this.setCapture && this.setCapture();
            return false
        };
        document.onmousemove = function (event) {
            if (!bDrag) return;
            var event = event || window.event;
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
            var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
            iL = iL < 0 ? 0 : iL;
            iL = iL > maxL ? maxL : iL;
            iT = iT < 0 ? 0 : iT;
            iT = iT > maxT ? maxT : iT;

            oWin.style.marginTop = oWin.style.marginLeft = 0;
            oWin.style.left = iL + "px";
            oWin.style.top = iT + "px";
            return false
        };
        document.onmouseup = window.onblur = oH2.onlosecapture = function () {
            bDrag = false;
            oH2.releaseCapture && oH2.releaseCapture();
        };
    }

通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽

...处理这些细节，经过翻阅jqueryui的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码/***[draggable拖拽方法]*@param{[type]}modal[移动元素]*@param 查看详情

js实现登陆页面的拖拽功能

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <styletype="text/css"> *{ margin:0; padding:0; } a{ text-d 查看详情

原生拖拽太拉跨了，纯js自己手写一个拖拽效果，纵享丝滑(代码片段)

...效果(如下图)，所以接下来我将以这种效果为蓝本，使用原生JS实现一个富有动感的自定义拖拽效果，话不多说直接开摸。实现原理首查看详情

再谈react.js实现原生js拖拽效果

前几天写的那个拖拽，自己留下的疑问。。。这次在热心博友的提示下又修正了一些小小的bug，也加了拖拽的边缘检测部分。。。就再聊聊拖拽吧一、不要直接操作dom元素react中使用了虚拟dom的概念，目地就是要尽量避免直接操... 查看详情

js实现拖拽

用原生Js实现的拖拽效果1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<metahttp-equiv="x-ua-compatible"content="ie=edge">6<title>封装拖拽</title>7<metaname= 查看详情

cookie结合js实现记住的拖拽

哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个cookie结合JS的小案例哦!话不多说直接上代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <style> #drag{ width:200px; 查看详情

原生拖拽,拖放事件(draganddrop)

参考技术A拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.一个完整的draganddrop流程通常包含以下几个步骤:1.设置可拖拽目标.设置属性draggable="true"实... 查看详情

javascript实现最简单的拖拽效果

一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情

three.js如何实现在x,y,z轴上的拖拽

...谢谢就是类似于3Dmax里的那种模型的拖拽参考技术ATHREE.js实现在x,y,z轴上的拖拽需要用户注册拖拽控件。1、注册的js代码如下：varscript=document.createElement('script'); script.type='text/javascript'; &nb... 查看详情

three.js如何实现在x,y,z轴上的拖拽

...是如果我用THREE.js创建了一个模型，那该用什么代码才能实现像上述那样可以选取那个模型并且拖拽移动它呢参考技术A在three的源码里面有一个编辑器，里面实现了这个功能，目前没有研究明白，可以去看一下。这是目前我发现... 查看详情

一个对页面节点的拖踹用原生js该如何实现

一个对页面节点的拖踹用原生js该如何实现很简单需要三个事件onmousedownonmousemoveonmouseup并给需要拖动的节点增加一个属性叫droping(这个属性表示节点是不是正处于拖拽状态)下面给出一份演示onmousedown控制节点扩展的属性droping为tru... 查看详情

jq实现登陆页面的拖拽功能

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery-1.9.1.min.js"type="text/javascript"charset="utf-8"></script> <title></title> 查看详情

electron开发：electron应用中的拖拽操作

...这种行为称为拖拽操作。本节将会通过两个案例介绍如何实现Electron应用的拖拽操作。本节将通过一个简单的案例演示如何实现图像文件的拖放操作，本例的主要功能是将一个图像文件拖拽的程序的某个区域，然后在窗口上按等... 查看详情

关于弹出层的拖拽，封装

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}html{height:100%;}body{width:100%;height:100%;positio 查看详情

原生api实现拖拽上传文件实践

功能：拖拽上传文件、图片，上传的进度条，能够同时上传多个文件。完整的demo地址：https://github.com/qcer/FE-Components/tree/master/QDrag涉及到的API：1、HTML5的拖拽事件：dragenter，dragover，drop等2、XMLHttpRequest Level23、FormData4、（扩展... 查看详情

qt::qwidget无默认标题栏边框的拖拽修改大小方式(代码片段)

...。这时候在QWidget中需要加上flag：Qt::FramelessWindowHint(实现方式很容易百度就不再赘述)。但是这样带来的问题就是系统自带的标题栏边框提供的拖拽移动和拖拽修改窗口大小的功能被废弃掉。这样就需要自己实现一个方案来提... 查看详情

为啥使用html5的拖拽功能，在火狐中总会弹出一个新面页？

...上都很正常，但是在火狐浏览器下，虽然拖拽功能也已经实现，但是每次拖拽操作后，就会弹出一个新面页，例如拖拽的目标是一个图形，弹出的面页就显示这个图形。现在就差火狐拖拽有上述这个问题了。请问那位高手能给指... 查看详情

wpf这可能是全网最全的拖拽实现方法的总结

原文:【WPF】这可能是全网最全的拖拽实现方法的总结前文本文只对笔者学习掌握的一般的拖动问题的实现方法进行整理和讨论，包括窗口、控件等内容的拖动。希望本文能对一些寻找此问题的解决方法的人和一些刚入门的人一... 查看详情