jquery draggable plugin -

kalllx

浏览: 63397 次
性别:
来自: 杭州

最近访客更多访客>>

nash_qiu

yamazakei

啊喔鹅咦呜鱼

ccc520

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery draggable plugin

jQuery CSS HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript"> 

		
	$(function(){
 	$("#test").draggable({hander:$("#p")});
 
	});
	  ~function($){
	  $.fn.draggable=function(cfg){
	   cfg=cfg?cfg:{};
	  this.each(function(){
	    var target=$(this),hander, proxy,x=0,y=0,flag=false;  
		hander=cfg.hander?cfg.hander:target;
		hander.mousedown(function(){
	   	x=event.clientX-target.attr("offSetLeft");
		y=event.clientY-target.attr("offSetTop");
		proxy = $("<div style='position:absolute;border:2px dashed #ccc;'></div>") ;
		proxy.insertAfter(target);
		proxy.css({"width":target.css("width"),"height":target.css("height"),"left":target.attr("offSetLeft")+5,"top":target.attr("offSetTop")+5,"z-index":9999});
		proxy.mousemove(mouseMove).mouseup(mouseUp);
	    $(document).mouseup(mouseUp).mousemove(mouseMove);
	    flag=true;
 
	    });
		function mouseMove(){
			if(flag)
			{
			window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
			proxy.css("left" ,event.clientX-x+5);
			proxy.css("top" ,event.clientY-y+5);
			}
		}

		function mouseUp(){
	
		var x=proxy.attr("offSetLeft")-5;
		var y=proxy.attr("offSetTop")-5;

		if(x<0)
		{
			x=0;
		}
		if(y<0)
		{
			y=0;
		}
	 
		if(y+proxy.height()>$(window).height())
		{
			y=$(window).height()-proxy.height()-3;
		}
		if(x+proxy.width()>$(window).width())
		{
			x=$(window).width()-proxy.width()-8;
		}
	
		target.animate({left:x,top:y},"slow");
		proxy.unbind("mousemove").unbind("mouseup");
		$(document).unbind("mousemove").unbind("mouseup");
		proxy.remove();
		flag=false;
	}

 
	  });

	  };
	  
	  }(jQuery);
	</SCRIPT>
</HEAD>

<BODY>
	<div id="display"
		style="position: absolute; width: 200px; height: 200px; border: 1px solid #f00; top: 120px; left: 20px;">	   dddd
	</div>
	<div id="test"
		style="position: absolute; width: 200px; height: 200px; border: 1px solid #f0f; top: 200px; left: 200px;">
		<div id="p" style="  width: 200px; height: 20px; border: 1px solid #f0f;  "> fffffffffffffddd</div>
	</div>
	<button id="btn" style="position: absolute;">dfdfdf</button>
</BODY>
</HTML>