文档章节

jquery拖拽改变div大小效果

孟飞阳
 孟飞阳
发布于 2017/05/04 14:45
字数 586
阅读 38
收藏 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery拖拽改变div大小效果 - 建站特效http://51xuediannao.com</title>
<meta name="keywords" content="jquery拖拽,改变大小" />
<meta name="description" content="jquery拖拽改变div大小效果" />

<style>
*{margin:0;padding:0;}
ul,ol,li{list-style: none;}
#wrap{width:660px;height: 150px;margin:10px auto;position: relative;clear:both;background: #0cc;}
#wrap li{width: 220px;float: left;height: 150px;background: #ccc;overflow: hidden;
		text-align: center;line-height: 50px;}
#wrap li.li1{background: #777;}
#wrap li.li2{background: #ccc;}
#wrap li.li3{background: #999;}
#wrap label{float: left;width: 10px;height: 150px;
			position: absolute;cursor: e-resize;}
#wrap label.lab1{left: 210px;background: #f00;}
#wrap label.lab2{left: 434px;background:#ff0;}
</style>
</head>
<body>
    <div id='wrap'>
	<ul>
		<li class="li1"></li>
		<label class="lab1" id='lab1'>1</label>
		<li class="li2"><a href="http://www.51xuediannao.com">懒人建站</a> http://www.51xuediannao.com 整理</li>
		<label class="lab2">2</label>
		<li class="li3"></li>
	</ul>
</div>

<div id='test' style="clear:both;"></div>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
	var clickX, leftOffset, inx, nextW2, nextW;
	var dragging  = false;
	var doc 	  = document;
	var labBtn 	  = $("#wrap").find('label');
	var wrapWidth = $("#wrap").width();

	labBtn.bind('mousedown',function(){
			dragging   = true;
			leftOffset = $("#wrap").offset().left;
			inx 	   = $(this).index('label');
		}
	);

	doc.onmousemove = function(e){
		if (dragging) {
			labBtn.eq(inx).prev().text( labBtn.eq(inx).prev().width() );
			labBtn.eq(inx).next().text( labBtn.eq(inx).next().width() );
			//--------------------------------------------
			clickX = e.pageX;
			$("#test").text( '鼠标位置:' + clickX );
			
			//判断第几个拖动按钮
			if( inx == 0 ){

				//第一个拖动按钮左边不出界
				if(clickX > leftOffset) {
					labBtn.eq(inx).css('left', clickX - 7 - leftOffset + 'px');//按钮移动

					labBtn.eq(inx).prev().width( clickX-leftOffset + 'px');
					nextW2 = clickX-leftOffset;
					labBtn.eq(inx).next().width( wrapWidth - nextW2 - labBtn.eq(inx+1).next().width() + 'px');
				} else {
					labBtn.eq(inx).css('left', '0px');
				}


				if(clickX > (labBtn.eq(inx+1).offset().left-5)) {
					//第一个按钮右边不出界
					labBtn.eq(inx).css('left', parseFloat(labBtn.eq(inx+1).css('left')) -11 + 'px');
					//第一个按钮,左右容器不出界
					labBtn.eq(inx).prev().width( labBtn.eq(inx).offset().left + 6 - leftOffset + 11 + 'px' );
					labBtn.eq(inx).next().width( '0px' );
				} 

			} else {

				//第二个拖动按钮左边不出界
				if( (clickX) > labBtn.eq(inx-1).offset().left + 10 ) {
					labBtn.eq(inx).css('left', clickX - 7 - leftOffset + 'px'); //按钮移动

					labBtn.eq(inx).prev().width( (clickX-leftOffset-labBtn.eq(inx-1).prev().width()) + 'px');
					nextW = clickX - leftOffset;
					labBtn.eq(inx).next().width( wrapWidth - nextW  + 'px');
				} else {
					//第二个按钮向左移动不出界
					labBtn.eq(inx).css('left', parseFloat(labBtn.eq(inx-1).css('left')) +10 + 'px');

					//第二个按钮左右容器,不出界
					labBtn.eq(inx).prev().width('0px')
					labBtn.eq(inx).next().width( wrapWidth - labBtn.eq(inx-1).prev().width() );
				}

				if( clickX >= (leftOffset + wrapWidth) ) {
					//第二个按钮右边不出界
					labBtn.eq(inx).css('left', wrapWidth -10 + 'px'); //减去按钮的宽度
					//第二个按钮左右容器,右边不出界
					labBtn.eq(inx).prev().width( wrapWidth - labBtn.eq(inx-1).prev().width());
					labBtn.eq(inx).next().width( '0px' );
				}

			}
		}
	};

	$(doc).mouseup(function(e) {
	    dragging = false;
	    e.cancelBubble = true;
	})
})
</script>

</div>
</body>
</html>

截图,可拖动红框和黄框:

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 204
博文 953
码字总数 540957
作品 5
朝阳
个人站长
JQuery插件开发教程 | WhyJQuery

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇...

柒月-小妖精
2013/11/14
0
1
分享10个使用简单的jQuery的拖放插件(drag and drop plugin)

日期:2012-4-20 来源:GBin1.com 在这篇文章中,我们将给大家介绍10个使用简单的拖放插件,能够方便快捷的帮助你添加拖放功能到你的网站。谢谢! Drag n Drop Scattered Gallery 支持不同外...

gbin1
2012/04/24
0
0
通用仪表盘Dashboard的简单实践

前言 在这个大数据的时代里,数据为王,系统能实时展示各种数据显得尤为重要,所以仪表盘便成为每个系统的标配。 背景 我们都知道大部分前端框架都提供了各种丰富的仪表盘,但有几点不能满足...

邵磊
07/24
0
0
JqueryMobile实践点滴

最近在用JqueryMobile写点东西,就遇到的一些小问题加以记录,也希望能帮到遇到相同问题的朋友。 1、动态改变图标data-icon,这个只是改变data-icon属性是不行的,之所以会有图标是因为jquer...

Bingo许
2013/05/16
0
0
10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

弹性工作制的魔咒

简评:你找到了一份完美的工作 —— 可以提前离开公司,还可以在晚上从家里回复邮件。既然如此,你为什么还会有那么强的负罪感呢? 或许是弹性工作制魔咒在作祟。 很多享受弹性工作制的人会始...

极光推送
4分钟前
0
0
KAFKA介绍(分布式架构)

Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以...

明理萝
10分钟前
0
1
os::NodeHandle::subscribe回调函数绑定对象

void Foo::callback(const std_msgs::Empty::ConstPtr& message){}Foo foo_object;ros::Subscriber sub = handle.subscribe("my_topic", 1, &Foo::callback, &foo_object); 参考: ht......

itfanr
11分钟前
0
0
React16.4 开发简书项目 从零基础入门到实战

React16.4 开发简书项目 从零基础入门到实战 关注我的订阅号下载 React16.4 开发简书项目 从零基础入门到实战

蜗牛奔跑
14分钟前
0
0
day57-20180815-流利阅读笔记-待学习

社恐怎么办?这个漫画或许能治愈你 毛西 2018-08-15 1.今日导读 近日,芬兰漫画家卡罗利娜·科尔霍宁创作的绘本《芬兰人的噩梦》在中国大火。一时间书中的主人公马蒂成为了人们茶余饭后热议的...

aibinxiao
18分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部