jQuery 드래그 div 요소 크기 변경
                                            
 2957 단어  프런트엔드javascript
                    
다음 코드를 복사해서 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          
 
$("#test").binddrag({
	minW:100,
	banH:true
});
//$(".box").binddrag();
//$(".box").each(function(){
//	$(this).binddrag();
//});
  
 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.