<!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. 浅谈stream数据流

    汴水流,泗水流,流到瓜州古渡头, 吴山点点愁.    我们知道水是源源不断的, 抽刀断水水更流, 斩不断, 理还乱,  是水流.(技术贴, 本文权当读者没学过古诗). 在一些语言里, 我们的前辈把数据 ...

  2. keepalived原理

    Keepalived的作用是检测服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作,当服务器工 ...

  3. bootstrap - btn

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 支付宝App支付~关于它的一些坑

    坑这个词不仅在微信平台适用,在支付宝也一样的,下面我们来看一下我在做App支付时的一些坑! APP支持流程: 网站H5下单->向支付宝生成订单->回调app的js->app调用支付宝 ...

  5. 匹配PC和移动端

    方法1: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; ret ...

  6. Angular2的模块架构浅谈

    引言angular2相比1引入了更完善的模块系统,回忆ng1的应用中通常在页面的html标签或body标签中添加ng-app节点,值为应用的模块名,整个应用都将围绕这个模块来展开,到了ng2,模块概念 ...

  7. C语言位运算符：与、或、异或、取反、左移和右移

    语言位运算符:与.或.异或.取反.左移和右移 位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符 ...

  8. WP8.1开发中关于如何显示.gif格式动态格式图片方法

    这几天又遇到个问题,就是如何显示动态图片,本来以为和显示静态图片一样,谁知不行,在网上一查才知道WP8.1不支持.gif格式动态图片的显示: 后来又在MSDN论坛上查找,也有人问类似的问题,后来就大概 ...

  9. 《经久不衰的Spring框架：Spring+SpringMVC+MyBatis 整合》

    前言 主角即Spring.SpringMVC.MyBatis,即所谓的SSM框架,大家应该也都有所了解,概念性的东西就不写了,有万能的百度.之前没有记录SSM整合的过程,这次刚刚好基于自己的一个小项目 ...

  10. 【转】Netty系列之Netty可靠性分析

    http://www.infoq.com/cn/articles/netty-reliability 首先,我们要从Netty的主要用途来分析它的可靠性,Netty目前的主流用法有三种: 1) 构建R ...