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--效果

隐藏,显示 语法 $(selector).hide(speed,callback); $(selector).show(speed,callback);
  • tmpbook
  • tmpbook
  • 2014年06月03日 16:20
  • 630

C# winform 拖拽效果

步骤: 1、 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析。 2、接受拖放控件的AllowDrop属性必须设置...
  • shuanger_
  • shuanger_
  • 2015年09月17日 16:57
  • 641

移动端拖拽的实现效果

拖拽
  • xyphf
  • xyphf
  • 2016年07月21日 23:17
  • 3739

Android实现拖动效果的两种解法

因为最近项目的需要,需要实现一个拖动效果,看了一下网上刚好有这种拖动效果的demo,代码大概如下: private void initListener(){ screenWidth =...
  • u013772458
  • u013772458
  • 2016年12月19日 11:48
  • 576

JS+DIV 实现拖动效果

效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码 Title ...
  • mixi9760
  • mixi9760
  • 2016年07月28日 20:59
  • 4168

Unity3D 触摸拖拽效果

在游戏制作或者应用制作中,鼠标或者触摸屏操作必不可少,像武器装备,从背包中把武器拖向人物属性,这个过程在Unity中没有相应的StarDarg、StopDrag方法。但是继承与MonoBehaviou...
  • luoyikun
  • luoyikun
  • 2017年07月21日 16:01
  • 426

jQuery--效果|动画

效果|动画 1、基本 l  通过改变元素 高度和宽度 进行显示或隐藏 show(speed,fn)显示        参数1:speed速度。显示的时间,单位:毫秒。固定字...
  • CSDN_GIA
  • CSDN_GIA
  • 2017年02月03日 10:31
  • 129

jQuery--图片提示效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">    无标题页    #...
  • helen_shw
  • helen_shw
  • 2010年01月06日 07:18
  • 473

MFC总结(18) --- 实现拖拽效果

效果图 在Windows下很多工具,都实现了拖拽的功能,代码功能相对来说比较简单,一共需要两个步骤 第一步: 创建MFC工程后,将该Dlg对话框中的Accept Files属性设置为True, ...
  • oBuYiSeng
  • oBuYiSeng
  • 2015年11月21日 15:36
  • 1192

页面中拖拽效果的实现

可拖放DOM模式(Draggable DOM pattern)可以让用户在Web页面中对各个部分进行编辑,即只需要选中要移动的部分,将其拖拽到新的位置上,就可以重新安排整个页面的布局效果,下面介绍一下...
  • tycsl
  • tycsl
  • 2007年11月16日 23:24
  • 4111
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery--拖拽效果
举报原因:
原因补充:

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