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

  • // 为元素 绑定拖动事件
    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. crm 动态一级二级菜单

    之前代码菜单是写是的 如何 让他 动态 生成了  首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...

  2. Entity Framework入门教程(1)---Entity Framework简介

    什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...

  3. C++创建对象的三种方法

    我自己以前经常弄混 A a(1); 栈内存中分配 A b = A(1); 栈内存中分配,和第一种无本质区别 A c = new A(1); 堆内存中分配 前两种在函数体执行完毕之后会被释放,第三种需要 ...

  4. input(type="checkbox"|type="radio")+jquery使用

    1.用.is(":checked")判断input是否为选中状态 例: var value=$(this).is(":checked"); localStora ...

  5. Kotlin 的优缺点

    从Android 7.0开始,谷歌使用的API从Oracle JDK切换到了open JDK,这对于谷歌来说是一个艰难的决定.对于开发者来说,却倍感兴奋,这意味着长期的官司问题也许就此结束,Andro ...

  6. monkeyrunner环境配置

    1.安装JDK.android  SDK.Python (安装完成后,配置环境变量:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\platfor ...

  7. 2018-2019-1 20189208《Linux内核原理与分析》第九周作业

    活动 main函数编译有问题,div 函数和系统中某个函数重名,浮点输出有问题,scanf也有问题 修改如下 scanf_s("%d %d", &a, &b); p ...

  8. underscore用法大全

    1._.find函数 var one = _.find(all, function (item) { return item.C_ID == selected; }); $('#C_NAME').va ...

  9. 布思算法Java实现

    public String multiply(String Q,String M){ char Q0 = '0'; String A = get01(Q.length(),"0") ...

  10. 金三银四背后,一个 Android 程序员的面试心得

    回顾一下自己这段时间的经历,九月份的时候,公司通知了裁员,我匆匆忙忙地出去面了几家,但最终都没有拿到offer,我感觉今年的寒冬有点冷.到十二月份,公司开始第二波裁员,我决定主动拿赔偿走人.后续的面试 ...