以下的页面中放了两个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. 【转】超简单利用UGUI制作圆形小地图

    http://sanwen.net/a/ithhtbo.html 由于UI都是Achor自己用PS做的,比较粗糙,大家见谅,不过丝毫不影响功能的实现,下面我们看看今天的笔记: 首先我们看看需要哪些组件 ...

  2. BZOJ 4175 小G的电话本 ——NTT

    后缀自动机统计出现了各种次数的串的和. 就是所谓的生成函数 然后FFT卷积即可. 卷积快速幂$n\log n \log n$ 注意一下实现,可以少两次NTT #include <map> ...

  3. input聚焦时，滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...

  4. 使用caffe测试自己的图片

    第一种方法是测试批量图片,使用caffe.bin即可,首先要做的是把你的jpg图片转换为LMDB的格式,如何转换呢?用/build/tools/convert_image --resize_width ...

  5. P1558 色板游戏 (线段树)

    题目链接 Solution 一个简单的 或 线段树.竟然坑了我一个小时... 因为颜色很小,所以把状态压起来. 然后每个节点上的数值代表当前颜色状态. 然后节点合并很简单,直接或起来. 需要注意一下的 ...

  6. 网络上面好用的webserice方法【公开】

    原文发布时间为:2009-07-27 -- 来源于本人的百度文章 [由搬家工具导入] 本帖转自 http://www.webxml.com.cn/zh_cn/web_services.aspx?off ...

  7. 调用Outlook发送邮件

    #region 查找与指定文件关联在一起的程序的文件名 /// <summary> /// 查找与指定文件关联在一起的程序的文件名 /// </summary> /// < ...

  8. 【Visual Studio】简单内存泄漏检测方法 解决 Detected memory leaks! 问题（转）

    原文转自 http://blog.csdn.net/u011430225/article/details/47840647 我的环境是: XP SP2.VS2003 最近在一个项目中, 程序退出后都出 ...

  9. 八、 Java程序初始化的顺序（一）

    今天在写构造器方法的时候,遇到了一个小问题,由这个问题引发了一连串的思考,在一个Java类中变量与类的初始化执行顺序是什么样的呢?## 发现问题 class Student{ private Stri ...

  10. 【转】重装Ubuntu时如何保留/home分区中的数据

    Windows系统可以在重装时只格式化C盘,从而保留其他分区的数据. Ubuntu系统也可以,只要在安装系统时分出一个/home分区.你可以把Ubuntu的“/”分区看为Windows的C盘,重装Ub ...