以下的页面中放了两个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. 小谈Bing桌面、Bing助手的现状与发展

    Teamwork中我的工作,既然写了就直接放上来吧. 一.Bing搜索的相关背景 第一,必应搜索前几年的发展重点在于欧美市场,并且取得了一定的成效:根据 Hitwise 的统计数据,Bing 在 20 ...

  2. http的一些知识

    TCP/IP协议分层 应用层 TFP DNS DNS域名解析的过程 在浏览器DNS缓存中搜索 读取系统的hosts文件,查找其中是否有对应的ip 向本地配置的首选DNS服务器发起域名解析请求 HTTP ...

  3. 习题：Dual Matrices（思路题/分治）

    tyvj1764 描述一个N行M列的二维矩阵,矩阵的每个位置上是一个绝对值不超过1000的整数.你需要找到两个不相交的A*B的矩形,使得这两个矩形包含的元素之和尽量大.注:A*B的矩形指连续的A行.B ...

  4. xml读取 避开并发（xml的一些操作）

    很多地方读取文件可能会出现并发现象 处理: 使用FileMode.Open, FileAccess.Read, FileShare.ReadWrite 避开并发 public static List& ...

  5. iOS 初始化（init、initWithNibName、initWithCoder、initWithFrame）

    很多朋友如果是初学iOS开发,可能会被其中的几个加载方法给搞得晕头转向的,但是这几个方法又是作为iOS程序员必须要我们掌握的方法,下面我将对这几个方法做一下分析和对比,看看能不能增加大家对几个方法的理 ...

  6. iOS - 倒计时封装

    +(NSString *)countdownStartTime:(NSString *)startTime{ NSString *TIME = [startTime substringToIndex: ...

  7. Mybatis Plugin插件安装破解及使用

    2018年2月更新 2018年2月份,提供一个网上比较多的一个版本V3.21版本,下载资源里面有个已整合版直接解压放入C:\Users\你的用户名\.IntelliJIdea2017.3\config ...

  8. POJ2771 Guardian of Decency

    Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5513   Accepted: 2319 Description Frank ...

  9. IOS-内存检测以及优化

    IOS-内存检测以及优化 2014年01月23日 Jason PS:开始写这个系列的笔记:主要是对过去自己比较模糊的一些概念进行测试,明确结果,提高自己 IOS 应用如果占用系统的内容过大(8GB), ...

  10. URL重写IIS7(URL Rewrite Module) 比之前的urlrewrite更方便使用

    原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 微软在IIS7中添加了URL的重写模块,并且免费使用，可以导入.htaccess规则，确实是个不错的选择 URL ...