<!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. 《JAVASCRIPT高级程序设计》第一章

    在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Java ...

  2. [css]《css揭秘》学习（三）-灵活的背景定位

    一.background-position属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. < ...

  3. C++ 头文件系列 (bitset)

    简介 该头文件有关位集,实际上是vector 位 位本质上对应bool的概念,只有0或1,true或false两种对立的值. 但很可惜,字节才是机器上最小的存储单元,所以bool基本上是由一个字节大小 ...

  4. 【.Net Framework 体积大？】不安装.net framework 也能运行！？开篇叙述-1

    [声明:请尊重作者micro-chen的原创,抓文章,请添加来源和作者署名.作者保留追责权利.......] 写在前言 看着日渐没落的.net ,心里多少有了点悲凉.国内的越来越多的新兴公司 都是JA ...

  5. PHP中的 !== 与 ！=

    '==' 比较两边的值是否相等,会自动转换类型: '===' 则会严格比较类型是否相同,如果类型不相同,直接返回false. 例如:'123' === 123 // => false '!=' ...

  6. 每天一个Linux命令（06）--rmdir命令

    终于忙完了公司的事,可以安静的充充电了. 今天学习一下Linux中命令:rmdir 命令,rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm -r dir 命 ...

  7. 程序点滴001_Python模拟点阵数字

    尝试过很多编程语言,写过不少程序(当然,基本上都是些自娱自乐或给自己用的工具类的小玩意儿),逐渐认识到编写程序是一个不断完善.不断优化的过程——编程首先要有一个想法(目标),围绕这个目标形成最基本的功 ...

  8. HttpClient 工具

    什么是httpclient HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 ja ...

  9. 点击Robot Framework的桌面快捷图标后，没有反应（没有打开应用程序）

    http://www.cnblogs.com/zhengyihan1216/p/6397478.html  这篇文章中介绍了如何安装Robot Framework以及如何在桌面上创建快捷方式. 但是有 ...

  10. if（）{}else 语句的正确写法以及它的嵌套使用

    if(一个返回bool值的条件表达式) { 程序块 } else{} 它的执行过程我们可以通过一个程序来了解 static void Main(string[] args) { ) // 条件1 { ...