`
445822357
  • 浏览: 738269 次
文章分类
社区版块
存档分类
最新评论

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>





















<!-- 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--><!-- 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>

                        

                    
                   
                
            

            

    




    个人资料


    


    


   

    


      

    • 访问：213119次

      • 
    
    • 积分：4680 
      •     
    
    • 等级： 
            
      
            
      
            积分：4680 
      
                
      • 
    
    • 排名：第1909名

      • 

    

      

    • 原创：225篇

      • 
    
    • 转载：1篇

      • 
    
    • 译文：0篇

      • 
    
    • 评论：154条

      • 

    











    QQ在线


    
点击这里给我发消息

    

    分享到点点
    <marquee align="middle"><br><font color="orange" size="3" face="楷书">相信自己，我能行</font></marquee>
    填写您的邮件地址，订阅我们的精彩内容：







    
    博客专栏







    文章分类







    文章存档







    
       
阅读排行    








    评论排行







    推荐文章


    

    
<script type="text/javascript">
 new Ad(12, 'ad_commend');
</script>
    

      最新评论
    


    
    
    
    
    
    
    

    

            
    
            
    
        
    

  


  
    
    
    
    分享到：
      
      
    
    
  
    

  
    
    
    
      
      |
      剑指Offer之斐波那契数列
    
    
  
    
  
    
        
  
    
    
  
    
    
    评论
    
    
    
    
    
  
    

  
    
    
    发表评论
    
            
       您还没有登录,请您登录后再发表评论 
    
      
    
  
    
  

    


    
  
    
    
    相关推荐
    
    
    
  
    

    

    
  
    Magicbox
  

    











      
    
            
    
    
    
    
  
    
  



   Global site tag (gtag.js) - Google Analytics