请教拖动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)
[解决办法]
加一句 e.stopPropagation试试... 事件冒泡引起了外层div也跟着触发事件
[解决办法]
如果只是这段代码的话，应该不会拖动外层的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>