html5jquery制作平滑拖拽效果,jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)...

相对于上一篇，优化了拖拽的效果。

js代码:fun.js

_MoveObj = null;//全部变量，用来表示当前div

z_index = 0;//z方向

jQuery.fn.myDrag=function(){

_IsMove = 0; //是否移动 1.移动

_MouseLeft = 0; //div left坐标

_MouseTop = 0; //div top坐标

$(document).bind("mousemove",function(e){

if(_IsMove==1){

$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});

}

}).bind("mouseup",function(){

_IsMove=0;

$(_MoveObj).removeClass("downMouse");

});

return $(this).bind("mousedown",function(e){

_IsMove=1;

_MoveObj = this;

var offset =$(this).offset();

_MouseLeft = e.pageX - offset.left;

_MouseTop = e.pageY - offset.top;

z_index++;

_MoveObj.style.zIndex=z_index;

$(_MoveObj).addClass("downMouse");

});

}

html代码:

demo.htm

.myDiv{

background:#EAEAEA;

width: 100px;

height: 100px;

border: 1px solid;

cursor: pointer;

text-align: center;

line-height: 100px;

}

.downMouse{

cursor:move;

filter:alpha(Opacity=80);

-moz-opacity:0.5;

opacity: 0.5;

background-color:#ffffff;

}

$(function(){

$(".myDiv").myDrag();

//$("#myDiv2").myDrag();

})

拖拽1

拖拽2

拖拽3

拖拽4

拖拽5

拖拽6