以下的页面中放了两个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. MySql 存储过程实例(附完整注释)(转)

    MySql 存储过程实例(附完整注释) 将下面的语句复制粘贴可以一次性执行完,我已经测试过,没有问题! MySql存储过程简单实例:                                   ...

  2. Weixin API -- 微信js接口

    今天在开发项目的时候,由于需要在微信中实现分享功能(分享成功后实现页面跳转并记录).问度娘,找了很久,终于找到一个不错的方法.收藏起来以后备用,也希望对大家有所帮助! 在github的地址:https ...

  3. 【bzoj2427】[HAOI2010]软件安装 Tarjan+树形背包dp

    题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大).但是现 ...

  4. [luogu1357] 花园 [dp+矩阵快速幂]

    题面: 传送门 思路: 把P形花圃记录为0,C形记录为1,那么一段花圃就可以状态压缩成一个整数 那么,我们可以有这样的状压dp: dp[i][S]表示前i个花圃,最后m个的状态为S的情况 如果这是一条 ...

  5. Nginx + tomcat 实现简单集群（基于反向代理方式）

    一.安装 nginx 1. nginx依赖以下一些软件库,在安装之前请确保安装了这些软件库,它们包括:gcc,openssl,zlib,pcre(可通过rpm -q命令查询是否已安装) 可通过命令 r ...

  6. 洛谷[P3622] 动物园

    状压DP 发现本题中,每个小朋友是否高兴仅取决于其后五个动物的情况,我们可以用状压DP解决本题 首先已处理 num[i][s] 表示对于位置 i ,状态为 s 时有多少在 s 的同学满意 转移方程很好 ...

  7. 【CodeChef】PARADE（费用流，最短路）

    题意: 思路: #include<cstdio> #include<iostream> #include<algorithm> #include<cstrin ...

  8. 从头实现一个koa框架

    koajs是最流行的nodejs后端框架之一,有很多网站都使用koa进行开发,同时社区也涌现出了一大批基于koa封装的企业级框架.然而,在这些亮眼的成绩背后,作为核心引擎的koa代码库本身,却非常的精 ...

  9. Push pull, open drain circuit, pull up, pull down resistor

    Push pull 就以下面這個 電路來說, 因為沒有 pull up resistor, 所以 output voltage 由 low 往 high 的速度會較快. 有兩個電晶體,一個on,一個 ...

  10. os模块 文件操作

    下面的方法可以在python程序里直接生成文件到系统路径(windows环境下测试): <<<<<<要注意字符串前面要加字母r>>>>> ...