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简单实现拖拽效果

  • 2016-01-28 11:05
  • 34KB
  • 下载

一个简单的图片拖拽排序效果 &nbsp; ----- &nbsp; JQUERY特效模板

最近不是特忙,整理一下之前做的一些效果的代码,搞一些模板出来方便之后使用,很多效果完整版已经找不到了,只能找到一些只兼容某些浏览器的版本十分遗憾,所以以后应该多多整理。 效果如下: ​ ...

jquery 拖拽效果

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

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

JQuery做出拖拽效果

The Drag Drop effect $(function(){ var posX,posY; var...

jquery插件——拖拽效果

无标题文档 $(document).ready(function (){ $("#draggable").draggable({ ...

jquery ui 学习可拖拽的效果(draggable)

jQuery UI Draggable - Constrain movement .draggable { width: 90px; height:...

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

写这篇文章的原因是因为不久前,我刚遇到这样的问题;说实话,实在是太恶心拉 而且自己又是初学者,完全搞不懂浏览器的版本之间的兼容性原理,而网上有没有关于这方面的很好的解答,着实难受我了好一阵子。好在低版...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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