以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

实现该效果的HTML页面代码例如以下所看到的：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #xixi {

            width:200px; height: 200px; position:absolute;

            left: 50px; top: 50px; background-color: lightcyan;

        }

        #haha {

            position:absolute; left:300px; top:300px;

            background-color: yellow; width:200px; height: 200px;

        }

    </style>

    <script type="text/javascript" src="js/mylib.js"></script>

    <script type="text/javascript">

        window.onload = function() {

            var obj1 = createDraggableObject();

            var obj2 = createDraggableObject();

            obj1.init($('xixi'));

            obj2.init($('haha'));

        };

    </script>

</head>

<body>

    <div id="xixi">Fuck!</div>

    <div id="haha">Shit!</div>

</body>

</html>

外部JavaScript文件代码例如以下所看到的：

/**

 * 依据id获取页面元素

 * @param id

 * @returns {HTMLElement}

 */

function $(id) {

    return document.getElementById(id);

}

/**

 * 创建可拖拽对象的工厂方法

 */

function createDraggableObject() {

    return {

        obj: null, left: 0, top: 0,

        oldX: 0, oldY: 0, isMouseLeftButtonDown: false,

        init: function (obj) {

            this.obj = obj;

			var that = this;

            this.obj.onmousedown = function (args) {

                var evt = args || event;

                this.style.zIndex = 100;

                that.isMouseLeftButtonDown = true;

                that.oldX = evt.clientX;

                that.oldY = evt.clientY;

				if (this.currentStyle) {

                    that.left = parseInt(this.currentStyle.left);

                    that.top = parseInt(this.currentStyle.top);

                }

                else {

                    var divStyle = document.defaultView.getComputedStyle(this, null);

                    that.left = parseInt(divStyle.left);

                    that.top = parseInt(divStyle.top);

                }

            };

            this.obj.onmousemove = function (args) {

                that.move(args || event);

            };

            this.obj.onmouseup = function () {

                that.isMouseLeftButtonDown = false;

                this.style.zIndex = 0;

            };

        },

        move: function (evt) {

            if (this.isMouseLeftButtonDown) {

                var dx = parseInt(evt.clientX - this.oldX);

                var dy = parseInt(evt.clientY - this.oldY);

                this.obj.style.left = (this.left + dx) + 'px';

                this.obj.style.top = (this.top + dy) + 'px';

            }

        }

    };

}

JavaScript实现网页元素的拖拽效果的更多相关文章

  1. JavaScript实现最简单的拖拽效果

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

  2. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  3. JavaScript实现水平进度条拖拽效果

    <html> <head> <meta charset="UTF-8"> <title>Document</title> ...

  4. 使用mousedown、mousemove、mouseup实现拖拽效果

    如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...

  5. javascript小实例，PC网页里的拖拽

    几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...

  6. javascript小实例，PC网页里的拖拽（转）

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  7. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  8. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  9. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

随机推荐

  1. C#知识点<3>

    1. C# 结构(Struct) 在 C# 中,结构是值类型数据结构.它使得一个单一变量可以存储各种数据类型的相关数据.struct 关键字用于创建结构. 结构是用来代表一个记录.假设您想跟踪图书馆中 ...

  2. [SDOI2009][bzoj1878] HH的项链 [莫队模板题]

    题面: 传送门 思路: 就是一道莫队的模板题目...... 开一个1000000的数组记录每个数出现的次数,然后每次从1到0或者从0到1更新答案 莫队讲解看这里:莫队 Code: #include&l ...

  3. cf 853 B Jury Meeting [前缀和]

    题面: 传送门 思路: 看完题目以后,首先有一个结论:每个人都是先去到首都,等待开会,开会结束以后再一个个走掉 而且这道题只有去首都和离开首都的机场 因此考虑计算去首都的飞机的前缀最小花费,以及离开首 ...

  4. 优化Angularjs的$watch方法

    Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火.比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用.这种行为给我们带来许 ...

  5. g2o安装

    1.安装依赖项 sudo apt-get install libeigen3-dev libsuitesparse-dev libqt4-dev qt4-qmake 2.安装依赖项  libqglvi ...

  6. HDOJ 1171 Big Event in HDU

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. ubuntu php编译安装配置

    安装参考:http://ilanni.blog.51cto.com/526870/1569322/ 加载扩展的一些参数参考:http://java-er.com/blog/nginx-php-fpm/

  8. spring一些总结

    Spring中三种实例化bean的方法: 1)使用类构造器   <bean id="orderService" class="cn.itcast.OrderServ ...

  9. 各种版本QT下载地址与VS2013+QT5.3.1环境搭建过程（转）

    原文转自 http://blog.csdn.net/baidu_34678439/article/details/54586058 1. 所有Qt版本下载地址: http://download.qt. ...

  10. vim中代码注释与取消的两种方法

    一.灵活应用列操作 取消注释(删除列) 1.光标定位到需要注释的第一行的行首. 2.CTRL+v 进入"可视 块"模式,选取需要注释的其他多行. 3.d 删除,注释取消.   添加 ...