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列子

 
 
 
 
 
 

 
 

 
    
aaa
	
bbb