jQuery 托拽div元素改变大小_jquery 拖曳 ui 拉伸-优快云博客

本文链接：https://blog.youkuaiyun.com/Blog_ShaoHuaiLin/article/details/79714635

这篇博客介绍了如何利用jQuery创建一个插件，实现网页上div元素的拖拽和大小调整功能。提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 拖拽改变大小 </title> 
<script type="text/javascript" src="jQuery-2.1.4.min.js"></script> 
<script type="text/javascript" src="binddrag.js"></script>
<style type="text/css"> 
.box{ 
    width:200px; 
    height:100px; 
    background:#f1f1f1; 
    text-align:center; 
    line-height:100px; 
    border:1px solid #CCC; 
    cursor:move; 
}
#test{
	position:absolute;
	top:20px;
	left:400px;
}
</style> 
</head> 

<body> 
    <div id="test" class="box">aaa</div>
	<div class="box">bbb</div>
</body>

<script>
$("#test").binddrag({
	minW:100,
	banH:true
});

//$(".box").binddrag();

//$(".box").each(function(){
//	$(this).binddrag();
//});
</script> 
</html>