js拖拽div移动-蒲公英云

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置

如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意！

第一种方法如下：

代码如下：

html代码如下：

<div id="message_box" style="position:absolute; background-color:#FFFFFF;border:solid 1px #000;width:420px;left:40%;top:20%;filter:alpha(opacity=100);opacity:1;visibility:hidden;z-index:1000;">
    <table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
        <tr id="titleBar" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;">
            <th align="left" unselectable="on" ><span>详细信息</span><span onClick="closeProc();" style="float: right;cursor: hand;">×</span></th>
        </tr>
        <tr style="height:130px;padding:3px;" align="left" valign="top" unselectable="on">
            <td>
                <table border='1px;' style="text-align: left;margin-top: 20px;font-size: 13px;">
                    <tr><td rowspan='3' class="js_head" style="width: 120px;"><img src="/static/images/face.jpg" style="width: 100px;height: 100px;margin-left: 10px;"/></td><td class="js_nickName"></td></tr>
                    <tr><td class="js_phone"></td></tr>
                    <tr><td>-$^_^$-</td></tr>
                    <tr style="height: 1px;"><td colspan='2'><hr style='color: red;'/></td></tr>
                    <tr><td colspan='2' class="js_mainBusiness"></td></tr>
                    <tr style="height: 1px;"><td colspan='2'><hr style='color: red;'/></td></tr>
                    <tr><td colspan='2' style="text-align: center"><input type="button" class="js_createRoomSendMessage" value="发消息" style="width: 70px;height: 35px;"></td></tr>
                </table>
            </td> <!---->
        </tr>
    </table>
</div>

js代码如下：

function DragDivDrag(titleBarID, message_boxID, obj) {
    var Common = {
        getEvent: function () {//ie/ff
            if (document.all) {
                return window.event;
            }
            func = getEvent.caller;
            while (func != null) {
                var arg0 = func.arguments[0];
                if (arg0) {
                    if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                        return arg0;
                    }
                }
                func = func.caller;
            }
            return null;
        },
        getMousePos: function (ev) {
            if (!ev) {
                ev = this.getEvent();
            }
            if (ev.pageX || ev.pageY) {
                return {
                    x: ev.pageX,
                    y: ev.pageY
                };
            }
            if (document.documentElement && document.documentElement.scrollTop) {
                return {
                    x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
                    y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
                };
            }
            else if (document.body) {
                return {
                    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y: ev.clientY + document.body.scrollTop - document.body.clientTop
                };
            }
        },
        getItself: function (id) {
            return "string" == typeof id ? document.getElementById(id) : id;
        },
        getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth, h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight },
        isIE: document.all ? true : false,
        setOuterHtml: function (obj, html) {
            var Objrange = document.createRange();
            obj.innerHTML = html;
            Objrange.selectNodeContents(obj);
            var frag = Objrange.extractContents();
            if (obj.parentNode != null) {
                obj.parentNode.insertBefore(frag, obj);
                obj.parentNode.removeChild(obj);
            }
        }
    }
///------------------------------------------------------------------------------------------------------
    var Class = {
        create: function () {
            return function () {
                this.init.apply(this, arguments);
            }
        }
    }
    var Drag = Class.create();
    Drag.prototype = {
        init: function (titleBar, message_box, Options) {
            //设置点击是否透明，默认不透明
            titleBar = Common.getItself(titleBar);
            message_box = Common.getItself(message_box);
            this.dragArea = { maxLeft: 0, maxRight: Common.getViewportSize.w - message_box.offsetWidth - 2, maxTop: 0, maxBottom: Common.getViewportSize.h - message_box.offsetHeight - 2 };
            if (Options) {
                this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
                this.keepOrigin = Options.keepOrigin ? ((Options.keepOrigin == true || Options.keepOrigin == false) ? Options.keepOrigin : false) : false;
                if (this.keepOrigin) {
                    this.opacity = 50;
                }
                if (Options.area) {
                    if (Options.area.left && !isNaN(parseInt(Options.area.left))) {
                        this.dragArea.maxLeft = Options.area.left
                    }
                    ;
                    if (Options.area.right && !isNaN(parseInt(Options.area.right))) {
                        this.dragArea.maxRight = Options.area.right
                    }
                    ;
                    if (Options.area.top && !isNaN(parseInt(Options.area.top))) {
                        this.dragArea.maxTop = Options.area.top
                    }
                    ;
                    if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) {
                        this.dragArea.maxBottom = Options.area.bottom
                    }
                    ;
                }
            }
            else {
                this.opacity = 100, this.keepOrigin = false;
            }
            this.originDragDiv = null;
            this.tmpX = 0;
            this.tmpY = 0;
            this.moveable = false;
            var dragObj = this;
            titleBar.onmousedown = function (e) {
                var ev = e || window.event || Common.getEvent();
                //只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
                if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
                }
                else {
                    return false;
                }
                if (dragObj.keepOrigin) {
                    dragObj.originDragDiv = document.createElement("div");
                    dragObj.originDragDiv.style.cssText = message_box.style.cssText;
                    dragObj.originDragDiv.style.width = message_box.offsetWidth;
                    dragObj.originDragDiv.style.height = message_box.offsetHeight;
                    dragObj.originDragDiv.innerHTML = message_box.innerHTML;
                    message_box.parentNode.appendChild(dragObj.originDragDiv);
                }
                dragObj.moveable = true;
                message_box.style.zIndex = dragObj.GetZindex() + 1;
                var downPos = Common.getMousePos(ev);
                dragObj.tmpX = downPos.x - message_box.offsetLeft;
                dragObj.tmpY = downPos.y - message_box.offsetTop;
                titleBar.style.cursor = "move";
                if (Common.isIE) {
                    message_box.setCapture();
                } else {
                    window.captureEvents(Event.MOUSEMOVE);
                }
                dragObj.SetOpacity(message_box, dragObj.opacity);
                //FireFox 去除容器内拖拽图片问题
                if (ev.preventDefault) {
                    ev.preventDefault();
                    ev.stopPropagation();
                }
                document.onmousemove = function (e) {
                    if (dragObj.moveable) {
                        var ev = e || window.event || Common.getEvent();
                        //IE 去除容器内拖拽图片问题
                        if (document.all) //IE
                        {
                            ev.returnValue = false;
                        }
                        var movePos = Common.getMousePos(ev);
                        message_box.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";
                        message_box.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";
                    }
                };
                document.onmouseup = function () {
                    if (dragObj.keepOrigin) {
                        if (Common.isIE) {
                            dragObj.originDragDiv.outerHTML = "";
                        }
                        else {
                            Common.setOuterHtml(dragObj.originDragDiv, "");
                        }
                    }
                    if (dragObj.moveable) {
                        if (Common.isIE) {
                            message_box.releaseCapture();
                        }
                        else {
                            window.releaseEvents(Event.MOUSEMOVE);
                        }
                        dragObj.SetOpacity(message_box, 100);
                        titleBar.style.cursor = "default";
                        dragObj.moveable = false;
                        dragObj.tmpX = 0;
                        dragObj.tmpY = 0;
                    }
                };
            }
        },
        SetOpacity: function (message_box, n) {
            if (Common.isIE) {
                message_box.filters.alpha.opacity = n;
            }
            else {
                message_box.style.opacity = n / 100;
            }
        },
        GetZindex: function () {
            var maxZindex = 0;
            var divs = document.getElementsByTagName("div");
            for (z = 0; z < divs.length; z++) {
                maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
            }
            return maxZindex;
        }
    }
    new Drag(titleBarID, message_boxID, obj); //, area: { left: 50, right: 500, top: 100, bottom: 400}
}

使用的时候，直接调用

DragDivDrag(“titleBar”, “message_box”, { opacity: 100, keepOrigin: true });

代码中

new Drag(titleBarID, message_boxID, obj); //, area: { left: 50, right: 500, top: 100, bottom: 400}
area参数代表div可移动的范围

仅供参考，如有疑问，请留言...

如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意第二中拖动的实现代码： <!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"> <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 rDrag = { o:null, init:function(o){ o.onmousedown = this.start; }, start:function(e){ var o; e = rDrag.fixEvent(e); e.preventDefault && e.preventDefault(); rDrag.o = o = this; o.x = e.clientX - rDrag.o.offsetLeft; o.y = e.clientY - rDrag.o.offsetTop; document.onmousemove = rDrag.move; document.onmouseup = rDrag.end; }, move:function(e){ e = rDrag.fixEvent(e); var oLeft,oTop; oLeft = e.clientX - rDrag.o.x; oTop = e.clientY - rDrag.o.y; rDrag.o.style.left = oLeft + 'px'; rDrag.o.style.top = oTop + 'px'; }, end:function(e){ e = rDrag.fixEvent(e); rDrag.o = document.onmousemove = document.onmouseup = null; }, fixEvent: function(e){ if (!e) { e = window.event; e.target = e.srcElement; e.layerX = e.offsetX; e.layerY = e.offsetY; } return e; } } window.onload = function(){ var obj = document.getElementById('draggable'); rDrag.init(obj); } </script> </head> <body> <div id="draggable">这个可以拖动！</a></div> </body> </html>  <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script> 上一篇图形数据库之---neo4j(非关系型数据库) 下一篇关于js动态生成元素，注册(绑定)的事件失效的解决(on) <script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434"></script><script type="text/javascript" id="bdshell_js"></script><script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) </script> 顶 1 踩 0 主题推荐 microsoft 鼠标移动 firefox 图片猜你在找 <script type="text/javascript"> var searchtitletags = 'js拖拽div移动' + ',' + 'microsoft,鼠标,移动,firefox,图片'; searchService({ index: 'blog', query: searchtitletags, from: 10, size: 10, appendTo: '#res-relatived', url: 'recommend', his: 2, client: "blog_cf_enhance", tmpl: '<dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="#{ url }" title="#{ title }" strategy="#{ strategy }">#{ title }</a></dd>' }); </script> <script type="text/javascript"> new Ad(4, 'ad_cen'); </script> 查看评论 * 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场 <script type="text/javascript"> var fileName = '14640591'; var commentscount = 1; var islock = false </script><script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js"></script> <script type="text/javascript"> new Ad(5, 'ad_bot'); </script> <script type="text/javascript"> $(function () { $("#ad_frm_0").height("90px"); setTimeout(function(){ $("#ad_frm_2").height("200px"); },1000); if($("#comment_content").length>0) { $("#quick-reply").show(); $("#quick-reply").click(function(){ setEditorFocus(); }); } var d_top = $('#d-top-a'); document.onscroll = function () { var scrTop = (document.body.scrollTop || document.documentElement.scrollTop); if (scrTop > 500) { d_top.show(); } else { d_top.hide(); } } $('#d-top-a').click(function () { scrollTo(0, 0); this.blur(); return false; }); }); </script><style type="text/css"> .tag_list { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D7CBC1; color: #000000; font-size: 12px; line-height: 20px; list-style: none outside none; margin: 10px 2% 0 1%; padding: 1px; } .tag_list h5 { background: none repeat scroll 0 0 #E0DBD3; color: #47381C; font-size: 12px; height: 24px; line-height: 24px; padding: 0 5px; margin: 0; } .tag_list h5 a { color: #47381C; } .classify { margin: 10px 0; padding: 4px 12px 8px; } .classify a { margin-right: 20px; white-space: nowrap; } </style> 核心技术类目全部主题 Hadoop AWS 移动游戏 Java Android iOS Swift 智能硬件 Docker OpenStack VPN Spark ERP IE10 Eclipse CRM JavaScript 数据库 Ubuntu NFC WAP jQuery BI HTML5 Spring Apache .NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 云计算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大数据 aptech Perl Tornado Ruby Hibernate ThinkPHP HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap <script type="text/javascript"> $(function(){ setTimeout(function(){ $(".comment_body:contains('回复')").each(function(index,item){ var u=$(this).text().split('：')[0].toString().replace("回复","") var thisComment=$(this); if(u) { $.getJSON("https://passport.csdn.net/get/nick?callback=?", {users: u}, function(a) { if(a!=null&&a.data!=null&&a.data.length>0) { nick=a.data[0].n; if(u!=nick) { thisComment.text(thisComment.text().replace(u,nick)); } } }); } }); },200); setTimeout(function(){ $("a img[src='http://js.tongji.linezing.com/stats.gif']").parent().css({"position":"absolute","left":"50%"}); },300); }); </script>

个人资料

$1\_qxs965266509.jpg$
qxs965266509

访问：213119次
积分：4680
等级：

积分：4680
排名：第1909名
原创：225篇
转载：1篇
译文：0篇
评论：154条

QQ在线
 $1369317411\_8814.png$

相信自己，我能行

博客专栏

深入浅出之Struts2

文章：9篇

阅读：8386

文章分类

网页制作(6)
Java编程(73)
数据库(8)
个人日志(2)
android(28)
Java Web开发(47)
面试(14)
Jsp(29)
Hibernate(10)
Struts2(9)
JS(26)
ajax(9)
jQuery(5)
oracle(7)
spring(6)
Nodejs(9)
neo4j(1)

文章存档

2014年07月 (1) 2014年03月 (1) 2014年02月 (1) 2013年12月 (1) 2013年11月 (5) 2013年10月 (3) 2013年09月 (11) 2013年08月 (9) 2013年07月 (5) 2013年06月 (14) 2013年05月 (16) 2013年04月 (15) 2013年03月 (19) 2013年02月 (1) 2012年12月 (13) 2012年11月 (28) 2012年10月 (16) 2012年09月 (20) 2012年07月 (5) 2012年06月 (4) 2012年05月 (11) 2012年04月 (10) 2012年03月 (6) 2012年02月 (6) 2011年12月 (1) 2011年11月 (2) 2011年10月 (2)

阅读排行