jquery拖拽效果完整实例(附demo源码下载)
更新时间：2016年01月14日 09:07:07 作者：xpsharp
这篇文章主要介绍了jquery拖拽效果实现方法,详细介绍了jQuery实现拖拽功能的具体步骤与相关技巧,并附代码了demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了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>
<div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></div>
<div id="big"></div>
</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程序设计有所帮助。
相关文章
jquery中获取元素的几种方式小结，需要的朋友可以参考下。2011-07-07
这篇文章主要介绍了用三种方法实现简单的登录页面的制作：纯HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。感兴趣的同学可以跟随小编一起学习一下2021-12-12
使用2句代码简单实现jquery动画的跳到顶部和底部；当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离，具体的实现如下，感兴趣的朋友可以参考下2013-07-07
这篇文章主要介绍了jquery ajax分页插件的简单实现的相关资料,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇完美解决jQuery的hover事件在IE中不停闪动的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了JQuery解析XML的方法,总结分析了常用的jQuery解析xml文件的相关技巧,需要的朋友可以参考下2016-04-04
jQtransForm jQuery表单美化修饰插件，附带有PHP提交程序，当然ASP/ASP/NET/JSP都是同理，这里主要是jQuery美化部分的实例，美化对象为文本框、密码框、文本域、Select下拉框、按钮等，有了这些示例，美化其它的表单元素应该不是大问题。2012-07-07
这篇文章主要介绍了jQuery+ajax的资源回收处理机制,结合实例形式简单分析了ajax中complete对象完成回调之后的资源回收处理机制用法,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了jQuery实现伸展与合拢panel的方法,可实现操作div层的平滑收缩与展开的功能,涉及jQuery中next、slideUp、slideDown等方法的使用技巧,非常简单实用,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了jQuery实现鼠标点击弹出渐变层的方法,jQuery是当下最具人气的JavaScript库,需要的朋友可以参考下2015-07-07
最新评论