Heim  >  Artikel  >  Web-Frontend  >  jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)_jquery

jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)_jquery

WBOY
WBOYOriginal
2016-05-16 17:30:53909Durchsuche

相对于上一篇,优化了拖拽的效果。
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







拖拽1

拖拽2

拖拽3

拖拽4

拖拽5

拖拽6





jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)_jquery
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn