兼容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代码更少。