<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>自由拖动的DIV层方块</title>

    <meta http-equiv="content-type" content="text/html;charset=gb2312">

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

    <style type="text/css">

        #draggable {

            background-color: green;

            font-size: 9pt;

            padding: 30px;

            color: white;

            width: 360px;

            height: 224px;

            position: absolute;

        }

    </style>

    <script type="text/javascript">

        var Drager = function () {

        };

        Drager.dom = null;

        Drager.selector = null;

        Drager.prototype.xdrag = function (dom, selector) {

            var obj = this;

            obj.selector = selector;

            dom.onmousedown = function (e) {

                e = obj.getEvent(e);

                e.preventDefault && e.preventDefault();

                obj.dom  = this;

                obj.dom.x = e.clientX+$(window).scrollLeft() - obj.dom.offsetLeft;

                obj.dom.y = e.clientY + $(window).scrollTop() - obj.dom.offsetTop;

                document.onmousemove = function (e) { obj.move(e, obj); };

                document.onmouseup = function (e) { obj.end(e, obj); };

            };

        };

        Drager.prototype.getEvent = function (e) {

            if (!e) {

                e = window.event;

                e.target = e.srcElement;

                e.layerX = e.offsetX;

                e.layerY = e.offsetY;

            }

            return e;

        };

        Drager.prototype.move = function (e,srcObj) {

            e = srcObj.getEvent(e);

            var oLeft, oTop;

            oLeft = e.clientX + $(window).scrollLeft() - srcObj.dom.x;

            oTop = e.clientY + $(window).scrollTop() - srcObj.dom.y;

            if (srcObj.selector != null) {

                if (oLeft > parseInt( srcObj.dom.style.left)) {

                    if (oLeft + $(srcObj.dom).outerWidth() > $(srcObj.selector).offset().left + $(srcObj.selector).outerWidth()) {

                        oLeft = $(srcObj.selector).offset().left + $(srcObj.selector).outerWidth() - $(srcObj.dom).outerWidth();

                    }

                } else if (oLeft < parseInt(srcObj.dom.style.left)) {

                    if (oLeft < $(srcObj.selector).offset().left ) {

                        oLeft = $(srcObj.selector).offset().left ;

                    }

                }

                if (oTop > parseInt(srcObj.dom.style.top)) {

                    if (oTop + $(srcObj.dom).outerHeight() > $(srcObj.selector).offset().top + $(srcObj.selector).outerHeight()) {

                        oTop = $(srcObj.selector).offset().top + $(srcObj.selector).outerHeight() - $(srcObj.dom).outerHeight();

                    }

                } else if (oTop < parseInt(srcObj.dom.style.top)) {

                    if (oTop < $(srcObj.selector).offset().top) {

                        oTop = $(srcObj.selector).offset().top;

                    }

                }

            }

            srcObj.dom.style.left = oLeft + 'px';

            srcObj.dom.style.top = oTop + 'px';

        };

        Drager.prototype.end = function (e,srcObj) {

            e = srcObj.getEvent(e);

            srcObj.dom = document.onmousemove = document.onmouseup = null;

        };

        var drag = new Drager();

    </script>

    <script type="text/javascript">

        window.onload = function () {

            var obj = document.getElementById('draggable');
            //第二个参数是限制范围，可不填

            drag.xdrag(obj,".container");

        }

    </script>

</head>

<body>

    <div class="container" style="width:800px;height:500px; background-color:red;">

        <div id="draggable">这个可以拖动！</a></div>

    </div>

</body>

</html>

JS 拖动DIV 需要JQUERY 支持的更多相关文章

  1. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. JS拖动div的原理

    要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗 ...

  3. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  4. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  5. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  6. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  7. jQuery 对AMD的支持（Require.js中如何使用jQuery）

    AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格 ...

  8. 基于jquery的可拖动div

    昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...

  9. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

随机推荐

  1. Fourier分析基础（一）——Fourier级数

    前言 傅立叶分析的作用是把一个函数变成一堆三角函数的和的形式,也就是分解.首先引入的是傅立叶级数,Fourier级数的作用是把函数变为可数无限个三角函数的和,而且这些三角函数的频率都是某个基频的整数倍 ...

  2. ubuntu-14.10下，安装gcc交叉编译器遇到问题及解决方法

    一 下载gcc-arm-none-eabi-4_9 安装成功后上报错误: ./gcc-arm-none-linux-gnueabi-gcc: No such file or directory 网上查 ...

  3. ROM、RAM、DRAM、SRAM和FLASH的区别

    ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写.ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是 ...

  4. DllRegisterServer的调用失败的问题解决方法

    1'按键盘上的win+x键调出常用命令. 2'选择“命令提示符(管理员)“ 3'在”命令提示符“中输入”regsvr32 c:\Windows\SysWOW64\comdlg32.ocx“或其他ocx ...

  5. java.math.BigDecimal()的用法

    Java中简单的浮点数类型float和double是不能进行运算的,不光Java,很多语言都是这样. 我们运行下面程序你将会看到 public class TestMathDecimal { publ ...

  6. 用《内网穿山甲》把本地IIS中的站点共享到远程访问

    前言: 因为各种原因,我们常常要把本机或局域网中搭建的站点发给远方的人访问,他有可能是测试人员.客户.前端.或领导演示,或是内部系统内部论坛临时需要在远程访问,事件变得很麻烦,要么有公网IP,要么能控 ...

  7. linux下安装Mysql 以及导入数据库

    1.下载mysql的rpm包,创建一个文件夹例如software来放置下面文件 可以通过wget下载具体的地址 (1)MySQL-server-5.6.10-1.rhel5.x86_64.rpm:My ...

  8. option触发事件两种方法总结

    代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <tit ...

  9. jxls2.3-简明教程

    jxls是一个简单的.轻量级的excel导出库,使用特定的标记在excel模板文件中来定义输出格式和布局.java中成熟的excel导出工具有pol.jxl,但他们都是使用java代码的方式来导出ex ...

  10. mongodb 安装到创建用户,认证auth,httpinterface

    今天花了一天时间来解开这个mongodb的谜团,如果有遇到了其他的问题,可以咨询我. #开始 2.6.10安装方式 不同版本后面设置用户权限方式有所差异#下载这个版本的mongodb mongodb- ...