<!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. 5. UITest测试总结

    1. 什么是Mock 当我们在做单元测试的过程中,为了保持测试又短又快和测试的隔离性,希望尽可能少地去实例化一些具体的组件.在现在面向对象的系统中,被测试的对象很可能会依赖于几个其他的对象,这时候我们 ...

  2. CSS3中选择器

    ::selection选择器 <style type="text/css"> .selectColor::selection{color:#fff;background ...

  3. JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用

    //截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...

  4. weex官方demo weex-hackernews代码解读(下）

    weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android.而weex-hacknews则是weex官方出品的,首个使用 Weex 和 Vu ...

  5. jQuery源码学习:Sizzle

    本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一 简介 Sizzle是用javascript实现的CSS selector engine,官网见https: ...

  6. Java显式锁学习总结之二：使用AbstractQueuedSynchronizer构建同步组件

    Jdk1.5中包含了并发大神Doug Lea写的并发工具包java.util.concurrent,这个工具包中包含了显示锁和其他的实用同步组件.Doug Lea在构建锁和组件的时候,大多是以队列同步 ...

  7. 百度网盘免费扩容 免费扩容到2048G

    您可以用手机端扩容 http://yun.baidu.com/1t 免费扩容到2048G

  8. mysql 安装及卸载 主从配置

    1.查询rpm -qa | grep mysql* 组件 出现类似安装包 mysql-server-5.1.71-1.el6.x86_64 mysql-libs-5.1.71-1.el6.x86_64 ...

  9. 警惕一大波银行类木马正在靠近，新型BankBot木马解析

    背景 来自安全公司Dr.Web的研究人员说,最近一个未命名的Android银行木马源代码在地下黑客论坛遭到了泄露.就在近期,阿里聚安全检测到大量新型BankBot家族木马,木马伪装成Good Weat ...

  10. HTML移动端开发常见的兼容性总结

    1.安卓浏览器看背景图片,有些设备会模糊.用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网 ...