<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>drag-demo</title>
    <style type="text/css">
    #one{width: 100px;height: 100px;background: #66CCCC;color:#FFFFFF;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        dragone('one');
    };

    // 版本一:仅仅只实现拖拽，忽略其他问题
    function dragone(domName){
        //获取需要拖到元素的dom对象
        var dom = document.getElementById(domName);
        //当这个dom元素按下的时候
        dom.onmousedown=function(e){
            /*
            浏览器兼容性判断主要是为了兼容ie8，其他的ie7、ie6没测试，不知道
             */
   
            e = e || window.event;
            /*
            设置该dom元素为绝对定位absolute
            只有设置为position:absolute才能实现left(距离页面左边)和top(距离页面顶部)设置，下面有说明
             */
            dom.style.position = 'absolute';
            /*
            e.clientX:获取鼠标按下点的位置在页面上的X（横向即水平）值
            这里假如是：e.clientX=10
            e.clientY:获取鼠标按下点的位置在页面上的Y（纵向即垂直）值
            这里假如是：e.clientY=20
            dom.offsetLeft：获取该元素距离页面左边的距离
            这里假如是：dom.offsetLeft = 5
            dom.offsetTop：获取该元素距离页面顶部的距离
            这里假如是：dom.offsetTop = 6

            这里如果不理解可以使用画图工具进行理解
            diffX:即5 = 10 - 5，计算出的5就是鼠标按下的x点距离该元素内部左边的值
            diffY:即14 = 20 - 6，计算出的14就是鼠标按下的y点距离该元素内部顶部的值
             */
            var diffX = e.clientX-dom.offsetLeft;           
            var diffY = e.clientY-dom.offsetTop;
            //当元素被点下并在界面上移动的时候
            document.onmousemove=function(e){
                e = e || window.event;//浏览器兼容
                /*
                dom.style.left和dom.style.top即距离页面左边、顶部的距离
                即用移动后的鼠标按下x，y值-之前按下点的距离内部左边、距离顶部的值
                得到的值即是移动后的元素距离页面的x，y的距离，重新赋值一下给dom元素即可
                 */
                dom.style.left = e.clientX-diffX+'px';//设置移动时left值
                dom.style.top = e.clientY-diffY+'px';//设置移动时top值
            };
            //鼠标松开的时候
            document.onmouseup=function(e){
                //去除页面移动、松开事件
                //去除后该元素下次再次被点击拖动时，这两个事件又会被绑定上的，无需担心
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
    </script>
</head>
<body>
    <div id="one">版本一</div>
</body>
</html>

#附图一张，理解拖动原理


js拖拽效果实现的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. js拖拽效果

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

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

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

  4. js拖拽效果的实现及原理

    元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...

  5. js拖拽效果的实现

    1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  6. js拖拽效果详细讲解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  9. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. 记一次简单的SQL优化

    原来的sql是这样写的 SELECT d.ONSALE_BARCODE, d.ONSALE_NAME, c.ONSALE_ID, CAST( , ) ) AS CUSTOMARY_PRICE, CAS ...

  2. Windows 10 虚拟桌面切换

    从Windows 10开始,终于有了和Mac一样的虚拟桌面了.但总感觉用着非常的别扭.在Mac中,切换虚拟桌面的操作可谓方便至极:除了触控板和Magic Mouse原生的支持外,通过罗技M557/55 ...

  3. 深入分析JS原型链以及为什么不能在原型链上使用对象

    在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...

  4. 编程语言吉祥物之Duke

    在看到这个可爱的小家伙前,我一直以为那个咖啡杯子是Java的吉祥物.直到拿到<Java性能优化权威指南>这本书,才知道有这个小东西Duke.这位可爱的Duke是由Joe Palrang在1 ...

  5. Hbase学习连接

    http://blog.csdn.net/baolibin528/article/details/43672131 http://m.blog.csdn.net/article/details?id= ...

  6. javascript中的自执行函数

    学习es6的时候遇到了自执行函数,感觉有必要写下来,一方面加深自己的记忆,另一方面还能分享给大家. 什么是自执行函数? 自执行函数就是为了不污染全局变量命名空间的一中匿名函数,相当于自己创建了一个作用 ...

  7. mac机上搭建php56/nginx 1.8.x/thinkphp 3.2.x/gearman扩展/seaslog扩展/redis扩展环境

    php的各种扩展配置起来实在不容易,记录一下备忘: 一.php56 安装 虽然php7出来了,但是没用过,不知道有没有坑,这里仍然使用php5.6版本 1.1 安装php/php-pfm brew u ...

  8. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  9. C#之发送邮件【模板】+【封装】ZJ版

    PS: 为了弥补上篇博客的不足,正好周六闲着没事.所以进行优化下,来个终结版 功能实现:模板发送+自指定邮箱发送+解耦 总体预览如下: 各代码如下:(代码略多,所以都折叠了) 前台; @{ Layou ...

  10. sql查询慢优化

    SELECT g.goods_id, g.type_id, g.user_id, g.productname, g.img, g.intro, g.attr, u.companyname, u.enl ...