js拖拽div移动

最新推荐文章于 2024-07-17 09:19:35 发布

iteye_21202

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量235

点赞数

文章标签：移动开发 java xhtml

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> 
     
 
     
 
      
      
      
      
      
      
     <!-- Baidu Button BEGIN --> 
     
      
      
      
      
      
      
     <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><!-- Baidu Button END --><!--192.168.100.33--> 
     上一篇图形数据库之---neo4j(非关系型数据库) 
 下一篇关于js动态生成元素，注册(绑定)的事件失效的解决(on) <!-- Baidu Button BEGIN --><script type="text/javascript" id="bdshare_js" data="type=tools&amp;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><!-- Baidu Button END --> 
     
      
      
        顶 
       
      
        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>