请教拖动div的问题


html:
 <div data-role='page' id='mainPage'> 
<div  class="ui-grid-b" style="cursor:pointer" ><div class="ui-block-a" id="A"><div id="AA" class="ui-bar ui-bar-d" style="height:60px" class="content">
<div style="float:left;width:90px;" id="me" ><a href='#' data-role='button' style="width:70px;" >Link button</a></div>
</div></div><div class="ui-block-b" id="B"><div id="BB" class="ui-bar ui-bar-d" style="height:60px"></div></div><div class="ui-block-c"><div id="CC" class="ui-bar ui-bar-d" style="height:60px"></div></div></div> 
</div>js函数：
$(function(){ 

$("#me").mousedown(function(e){
var p = $("#me");
var offset = p.offset();
_move=true; 
_x=e.pageX-offset.left; 
_y=e.pageY-offset.top; 
}); 
$("#me").mousemove(function(e){
var x,y;
if(_move){
 x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置 
 y=e.pageY-_y; 
//$("#me").css("position","absolute");
$("#me").css({top:y,left:x});
}
}).mouseup(function(){ 
_move=false; 
}); 
})
通过上边的js函数拖动id="me"的div，结果连最外层的div（即id=mainPage）一起拖动了，如何做到只拖动 id="me"的div呢？
(上述div是jquery提供的layout控件，目标是实现移动layout内部的指定id的div)

解决方案 »

  1.   

    上述拖动方法是用jquery写的，如果用纯js写，则可实现目标，即只拖动id="me"的div
      

  2.   

    加一句 e.stopPropagation试试... 事件冒泡引起了外层div也跟着触发事件
      

  3.   

    如果只是这段代码的话，应该不会拖动外层的div，要拖动目标必须将目标绝对定位。
    这段代码还有其它一些问题，比如拖动时鼠标释放了，但事件没有释放，即时没有按住鼠标，也会导致拖动目标跟随鼠标移动。可以参考一下网上成熟的拖动源码。
    以下是测试代码，必须与jquery.js放在同一个目录使用。
     <!doctype html>
     
     <div data-role='page' id='mainPage' style="border:1px solid green;">  
    <div class="ui-grid-b" style="cursor:pointer" ><div class="ui-block-a" id="A"><div id="AA" class="ui-bar ui-bar-d" style="height:60px" class="content">
    <div style="float:left;width:90px;border:1px solid red;" id="me" ><a data-role='button' style="width:70px;" >Link button</a></div>
    </div></div><div class="ui-block-b" id="B"><div id="BB" class="ui-bar ui-bar-d" style="height:60px"></div></div><div class="ui-block-c"><div id="CC" class="ui-bar ui-bar-d" style="height:60px"></div></div></div>  
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        var _move,_x,_y;
        
        $("#me").css("position","absolute");
        
        $("#me").mousedown(function(e){
            var p = $("#me");
            var offset = p.offset();
            _move=true;  
            _x=e.pageX-offset.left;  
            _y=e.pageY-offset.top;  
        });
          
        $("#me").mousemove(function(e){
            var x,y;
            if(_move){
            x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置  
            y=e.pageY-_y;  
            //$("#me").css("position","absolute");
            $("#me").css({top:y,left:x});
            }
        }).mouseup(function(){  
            _move=false; 
        });
    });
    </script>