这次给大家带来jquery拖拽效果实现方法，jquery拖拽效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。
运行效果截图如下：
点击此处查看在线演示效果。
具体代码如下：
html部分：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="tuo.js"></script>
<script type="text/javascript">
$(function(){
$(#box).tuoz();
})
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
height:100px;
width:100px;
background:#666666;
}
#box img{
height:50px;
width:50px;
background:#666666;
}
#big{
height:400px;
width:300px;
background:purple;
}
</style>
</head>
<body>
<p id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></p>
<p id="big"></p>
</body>
</html>
jquery部分：
(function(){
$.fn.extend({
tuoz:function(){
return this.each(function(){
var $this=$(this);
var ey=;
var ex=;
var mx=;
var my=;
var tx=;
var ty=;
var small_x=;
var small_y=;
var big_height=;
var big_width=;
var big_x=;
var big_y=;
var move=false;
$this.mousedown(function(e){
move=true;
mx=$this.offset().left;
my=$this.offset().top;
ex=e.clientx;
ey=e.clienty;
tx=ex-mx;
ty=ey-my;
small_x=$(#big).offset().left;
small_y=$(#big).offset().top;
big_height=$(#big).height();
big_width=$(#big).width();
big_x=small_x+big_width;
big_y=small_y+big_height;
})
$(document).mousemove(function(e){
ex=e.clientx;
ey=e.clienty;
if(move==true){
$this.offset({left:ex-tx,top:ey-ty});
}
})
$this.mouseup(function(e){
move=false;
ex=e.clientx;
ey=e.clienty;
if(ex>=small_x && ey>=small_y && ex<=big_x && ey<=big_y){
$(#big).append($this.html());
}
$this.offset({left:mx,top:my});
})
})
}
})
})(jquery)
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery实现鼠标经过时放大图片功能
jquery实现图片滑动切换（附代码）
以上就是jquery拖拽效果实现方法的详细内容。