嗯哼。不多说,直接上代码了。

  • // 为元素 绑定拖动事件
    function bindDragEvent(obj){
    obj.onmousedown = function(e){
    e = e || window.event; obj.setCapture && obj.setCapture(); // IE8 及以下 强制捕获下一次单击事件 obj.fixedX = e.clientX - (obj.getBoundingClientRect().left - document.documentElement.clientLeft);
    obj.fixedY = e.clientY - (obj.getBoundingClientRect().top - document.documentElement.clientTop); document.onmousemove = function(e){
    e = e || window.event; var x = e.clientX + (document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft);
    var y = e.clientY + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop); obj.style.left = x - obj.fixedX + "px"; // 元素在页面中的坐标 = 鼠标在页面中的坐标 - 元素在页面中的坐标
    obj.style.top = y - obj.fixedY + "px";
    }; document.onmouseup = function(){
    document.onmousemove = null; // 解除 鼠标移动div跟随 事件
    document.onmouseup = null; // 解除鼠标松开事件
    obj.releaseCapture && obj.releaseCapture(); // IE8 及以下 解除强制捕获单击事件
    }; return false;
    };
    }

js 原生_拖动页面元素,松开释放的更多相关文章

  1. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  2. 每日分享!~ 使用js原生方式对拖拉元素(鼠标的事件)

    一个元素放置页面上.如何进行拖拉,实现想放哪里就放哪里的效果呢? 效果如下: 如果让你写这个效果,你会如何写呢? --- 思路分析:我首先想到的是,对这个元素先绑定一个事件.(什么事件? 那当然是鼠标 ...

  3. js原生选择class DOM元素

    document.querySelector(".demo"); querySelector() 方法返回匹配指定选择器的第一个元素.如果需要返回所有的元素,使用 querySel ...

  4. JS与JQ 获取页面元素值的方法和差异对比

    获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeig ...

  5. js原生_获取url键值对

    思路: 1.先对url进行处理,获取 ?后的字符串 postid=10457794&actiontip=保存修改成功') 2. 字符串通过&标识,不同参数转为数组 ["pos ...

  6. js动态增加html页面元素

    问题:   <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2 ...

  7. 在js中获取到的页面元素为undefined

    在学习js的过程中发现了一个问题就是:在js代码中获取页面元素进行操作的时候发现怎么都没有效果,控制台也不报错,弹出获取的元素结果发现是undefined类型. 后来查找了资料发现:因为我的js是写在 ...

  8. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  9. 原生js与jquery加载页面元素比较

    原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...

随机推荐

  1. C#中的Finalize,Dispose,SuppressFinalize的实现和使用介绍

    原文地址:http://www.csharpwin.com/csharpspace/8927r1397.shtml MSDN建议按照下面的模式实现IDisposable接口: public class ...

  2. 17、 利用扇贝网:https://www.shanbay.com/, 做个测单词的小工具。

    先说下,我可以说完全没有看题目要求,我只看了下扇贝网的单词测试工具就开始编码了,写出来的代码尽可能的模仿了网站上的效果. 因为把问题搞复杂了,在这个练习上耽误了很长时间,最后都不想写了,所以代码有些混 ...

  3. 自定义border 为 dashed 时的虚线间距

    li{ width: 100%; height: 3px; background-image: linear-gradient(to right, #009a61 0%, #009a61 50%, t ...

  4. Vue技术内幕 出去看看吧 挂载

    src\platforms\web\runtime\index.js 挂载 Vue.prototype.$mount = function ( el?: string | Element, hydra ...

  5. java和数据库中日期类型的常见用法

    (1)java中日期类型:Date.Timestamp(2)数据库中:Date.Timestamp(3)字符串和Date之间的格式化转换:    SimpleDateFormat类方法: format ...

  6. Windows下ToroiseSVN基本使用&&在Visual studio中使用SVN

    首先在 https://tortoisesvn.net/downloads.html 下载svn客户端 下载并安装好之后再开始菜单会出现如下图标: 现在可以开始使用TortoiseSVN了,选择一个本 ...

  7. linux 乌班图 xshell链接不上服务器

    输入  ps -e |grep ssh ,如果没有任何反应则是没有安装 命令 sudo apt-get install openssh-server 然后出现是否同意-Y,同意进行自动下载 如果提示  ...

  8. $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 转成[[1,a],[2,b],[3,c],[4,d],[5,3]]

    $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 结果 [[1,a],[2,b],[3,c],[4,d],[5,3]] return array_map(function($v1,$v2 ...

  9. java设计模式自我总结---适配器模式

    上一篇博客说完了 java 23 中设计模式中的五种 创建性模式,由于篇幅过长,新开一贴今天开始学习结构型模式, 结构型模式包括以下七种:适配器模式.装饰模式.代理模式.外观模式.桥接模式.组合模式. ...

  10. Redis实战 - 1.String和计数器

    在.NET Core 项目中操练String 使用 StackExchange.Redis 访问 Redis static void Main(string[] args) { using (Conn ...