请问拖动div的有关问题-JavaSript-爱易网页

请问拖动div的有关问题

日期：2014-05-16　浏览次数：20486 次

请教拖动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放在同一个目录使用。

HTML code

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

请问拖动div的有关问题

相关资料更多>

推荐阅读更多>