兼容ie ff 等浏览器的jquery,js层移动方法一

<script type="text/javascript">  
function Mmousedown(i,e){
var imgClick = false;
    var imgLeft;//单击时img的left值
    var imgTop;//单击时img的top值
    var mouseX;//单击时鼠标的x值
    var mouseY;//单击时鼠标的y值

    imgClick = true;
    mouseX = e.clientX;
    mouseY = e.clientY;
    imgLeft = $('#d'+i).offset().left;
    imgTop = $('#d'+i).offset().top;
    mmove(i,imgLeft,imgTop,mouseX,mouseY,imgClick);
}
function mmove(i,imgLeft,imgTop,mouseX,mouseY,imgClick){
    $(document).bind("mousemove",function(e){
    window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
    if(imgClick){
        $('#t'+i).css({left:e.clientX - (mouseX - imgLeft),top:e.clientY - (mouseY - imgTop)});
        $('#d'+i).css({left:e.clientX - (mouseX - imgLeft),top:e.clientY - (mouseY - imgTop)});
    }
});
$(document).mouseup(function(){
    imgClick = false;
});
}

function Cclick(i){
/*$('div[name="tuodong"]').each(function(){
        $("#"+i).css("z-index","1000");
        alert($("#"+i).css("z-index"));
    });*/
    $(".tuodong").css("z-index","1000");
    $("#d"+i).css("z-index","10000");
    //alert($("#"+i).css("z-index"));
    
}
</script>

<style type="text/css">  
.drag{width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;;cursor:move;}  
</style>  
 
<!--模块拖拽-->  
<div class="drag tuodong" id="d1" onmousedown="Mmousedown(1,event)"  onclick="Cclick(1)" style="position:absolute;top:100px;left:20px">这个层是可以拖动滴 ^_^ <br />  </div> 

<div class="drag tuodong" id="d2" onmousedown="Mmousedown(2,event)"  onclick="Cclick(2)" style="position:absolute;top:100px;left:20px">这个层是可以拖动滴 ^_^ <br />  </div>

<div class="drag tuodong" id="d3" onmousedown="Mmousedown(3,event)"  onclick="Cclick(3)" style="position:absolute;top:100px;left:20px">这个层是可以拖动滴 ^_^ <br />  </div>

 

上述是一种方法还有一种方法哦!而且更简单,功能实现也是一样的。js代码更少。

 

posted @ 2013-03-19 16:06  lovelyclove  阅读(139)  评论(0编辑  收藏  举报