jQuery 드래그 div 요소 크기 변경

jquery를 이용하여 웹 페이지의div 크기를 마우스로 변경할 수 있습니다.
다음 코드를 복사해서 binddrag로 저장하는 플러그인입니다.js 파일이면 됩니다.
/**
 *   jquery div      
 *   : 
 *   :1.0.0
 *
 *     
 *
 * minW =>       (  :number)
 * minH =>       (  :number)
 * banW =>          (  :boolean)
 * banH =>          (  :boolean)
 * 
 *     
 *
 * ///////////////////////
 *  1:
 * 
 * $("div").binddrag();
 * 
 *     div       ,      div  
 *        ,    div         
 *   
 *
 * ///////////////////////
 *  2:
 * 
 * $("div").binddrag({
 * 		minW:100,
 * 		minH:200
 * });
 * 
 *     ,    div     100px     
 *  ,     200      。
 *   :minW   minH   div       ,  
 *        
 *
 * ///////////////////////
 *  3:
 * 
 * $("div").binddrag({
 * 		minW:100,
 * 		banH:true
 * });
 * 
 *     ,    div            ,       
 * 
 */
$.fn.binddrag = function(obj){
	if(typeof(obj) == "undefined") obj = {};
	var minW = obj.minW 	|| 0;		//    
	var minH = obj.minH 	|| 0;		//    
	var banW = obj.banW 	|| false;	//    
	var banH = obj.banH 	|| false;	//   
	var thisObj = this;				 	//  div  
	var x = y = 0;						//   x,y  
	
	try{
		if(typeof(minW) != "number") throw new Error("     ,minW number  ");
		if(typeof(minH) != "number") throw new Error("     ,minH number  ");
		if(typeof(banW) != "boolean") throw new Error("     ,banW boolean  ");
		if(typeof(banH) != "boolean") throw new Error("     ,banH boolean  ");
	}catch(e){
		console.log(e.message);
		return;
	}
	
	$(thisObj).mousedown(function(e){
		//     ,                
		x = e.clientX - $(this).width();
		y = e.clientY - $(this).height();
		
		//     
		$(document).bind("mousemove",mMove).bind("mouseup",mUp);
		//         
		e.preventDefault();
	});
	
	//     
	function mMove(e){
		var w = e.clientX - x;
		var h = e.clientY - y;
		!banW ? (
			w >= minW ? ($(thisObj).width(w)) : ("")
		):("");
		!banH ?(
			h >= minH ? ($(thisObj).height(h)) : ("")
		):("");
	} 
	//     
	function mUp(){  
		$(document).unbind("mousemove", mMove).unbind("mouseup", mUp)//      
	} 
}

html 열
 
 
 
 
jQuery         
 

 
 

 
    
aaa
bbb
$("#test").binddrag({ minW:100, banH:true }); //$(".box").binddrag(); //$(".box").each(function(){ // $(this).binddrag(); //});

좋은 웹페이지 즐겨찾기