文档章节

jquery拖拽改变div大小效果

孟飞阳
 孟飞阳
发布于 2017/05/04 14:45
字数 586
阅读 37
收藏 0
点赞 0
评论 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>

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

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 202
博文 895
码字总数 531335
作品 5
朝阳
个人站长
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaWeb04-HTML篇笔记(二)

1.1 使用JQuery完成定时弹出广告:1.1.1 需求: 之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果: 1.1.2 分析1.1.2.1 技术分析: 【JQuery的概述】 【JS对象和JQ对象的转...

我是小谷粒 ⋅ 05/08 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi ⋅ 06/19 ⋅ 0

jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现--------- cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动 onCheck: f...

AIU_GS ⋅ 05/22 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 06/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 55分钟前 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部