Home  >  Article  >  Web Front-end  >  jquery实现简单的拖拽效果实例兼容所有主流浏览器_jquery

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

WBOY
WBOYOriginal
2016-05-16 17:31:41945browse

最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数。
jquery代码:fun.js

复制代码 代码如下:

jQuery.fn.myDrag=function(){
_IsMove = 0;
_MouseLeft = 0;
_MouseTop = 0;
return $(this).bind("mousemove",function(e){
if(_IsMove==1){
$(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
}
}).bind("mousedown",function(e){
_IsMove=1;
var offset =$(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e.pageY - offset.top;
}).bind("mouseup",function(){
_IsMove=0;
}).bind("mouseout",function(){
_IsMove=0;
});
}

html代码:
复制代码 代码如下:



demo.htm







拖拽1

拖拽2




效果图1:
jquery实现简单的拖拽效果实例兼容所有主流浏览器_jquery 
效果图2:
jquery实现简单的拖拽效果实例兼容所有主流浏览器_jquery
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn