以下的页面中放了两个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++字符串高效查找替换，有空分析分析

    void CWebTransfer::Substitute(char *pInput, char *pOutput, char *pSrc, char *pDst) { char *pi, *po, ...

  2. [cocos2dx enhancement] CCPlatformMacros.h

    为了更好的调试Log,优化CCLOG格式 path: cocos2dx/platform/CCPlatformMacros.h line 218: #define CCLOGERROR(format, ...

  3. 设计模式（一）单例模式：2-懒汉模式（Lazy）

    思想: 相比于饿汉模式,懒汉模式实际中的应用更多,因为在系统中,“被用到时再初始化”是更佳的解决方案. 设计思想与饿汉模式类似,同样是持有一个自身的引用,只是将 new 的动作延迟到 getinsta ...

  4. cmake导出的visual studio工程带头文件

    file(GLOB_RECURSE CURRENT_HEADERS *.h *.hpp) 分组显示 source_group("Include" FILES ${CURRENT_H ...

  5. hdu3586 Information Disturbing 【树形dp】

    题目链接 hdu3586 题解 二分 + 简单的树形dp 我正有练一下dp的必要了 #include<iostream> #include<cstdio> #include&l ...

  6. python 小爬虫

    import reimport urllibdef getHtml(url): page=urllib.urlopen(url); html=page.read() return htmldef ge ...

  7. [暑假集训--数论]poj3518 Prime Gap

    The sequence of n − 1 consecutive composite numbers (positive integers that are not prime and not eq ...

  8. How to use rowspan and colspan in tbody using datatable.js?

    https://stackoverflow.com/questions/27290693/how-to-use-rowspan-and-colspan-in-tbody-using-datatable ...

  9. 合理使用webpack提高开发效率

    虽然公司有提供现成的脚手架工具,但是作为开发人员懂得必要的相关知识还是很重要的.这样有利于提高我们的开发效率,优化我们的代码. 关于npm scripts 什么是npm scripts npm 允许在 ...

  10. DataReader和Dataset的性能比较 以及什么时候用dataset什么时候用DataReader

    原文发布时间为:2009-11-13 -- 来源于本人的百度文章 [由搬家工具导入] DataReader和Dataset的性能比较 以及什么时候用dataset什么时候用DataReader 【技术 ...