jquery--拖拽效果

原创 2012年03月27日 15:55:06

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特效 拖拽图片调整效果

  • 2013年10月24日 21:54
  • 590KB
  • 下载

jquery简单实现拖拽效果

  • 2016年01月28日 11:05
  • 34KB
  • 下载

利用jquery插件中的拖拽与放置实现的相册效果,可以删除和恢复

该效果为官方提供,本人只是进行了一下翻译,加了些详细注释供大家参考,对大家有帮助就ok了,如有解释错误谢谢提出。 以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: j...

jquery 拖拽效果

  • 2012年02月29日 11:28
  • 2KB
  • 下载

jquery sortable 拖拽效果 源码

  • 2011年07月13日 11:07
  • 104KB
  • 下载

针对于ie8的拖拽效果的jQuery实现的方法

写这篇文章的原因是因为不久前,我刚遇到这样的问题;说实话,实在是太恶心拉 而且自己又是初学者,完全搞不懂浏览器的版本之间的兼容性原理,而网上有没有关于这方面的很好的解答,着实难受我了好一阵子。好在低版...

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见。实现

jquery实现简单的拖拽效果,兼容所有浏览器(二)

相对于上一篇,优化了拖拽的效果。        js代码:fun.js _MoveObj = null;//全部变量,用来表示当前div z_index = 0;//z方向 jQuery.f...

利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

其实table和div这两种布局方式是互为优劣的。但是目前来说div越来越成为一种主流设计方式,其布局效果灵活、样式新颖的特点也越来越受到青睐。而且这里我们所讲的,如果你想使用拖拽的方式轻松实现页面布...

原生JavaScript与jQuery(绝对、相对定位)实现拖拽效果

今天给大家谈谈这个拖拽功能的实现 一是想复习一下这个小知识,二是看到网上都是absolute绝对定位实现的,感觉有一定局限性 所以自己写了一下用relative相对定位来实现的拖拽效果原生js绝对...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery--拖拽效果
举报原因:
原因补充:

(最多只允许输入30个字)