<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery拖拽改变div大小效果</title>

<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">内容区域</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 style="height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
</body>
</html>

纯JS.CSS编写的可拖拽并左右分栏的插件（复制代码就能用）的更多相关文章

  1. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  2. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  3. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  4. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  5. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

  6. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  7. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  8. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  9. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

随机推荐

  1. C语言中使用bool

    声明 C语言中是没有bool类型的. 使用方法 参考: https://stackoverflow.com/q/1921539.

  2. (二)文档请求不同源之window.name跨域

    一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...

  3. DWM1000 测距原理简单分析 之 SS-TWR

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: DWM1000 超宽带测距,使用的TOF(time of fly) 的方式,也就是计算无线电磁波传输时 ...

  4. 机器学习——线性回归-KNN-决策树(实例)

    导入类库 import numpy as np import pandas as pd from sklearn.linear_model import LinearRegression from s ...

  5. java+接口自动化+eclipse之-----环境搭建

    根据金字塔的比重总结,UI测试占用10%,接口测试占有20%,单元测试占用70%.考虑到之前学过一段时间的单元测试.UI测试,而接口测试未曾接触过,所以最近打算看看接口测试是怎么实现的. 首先,我们先 ...

  6. IOS中多线程的总结

    首先要知道线程和进程的区别.一个系统上运行的每一个应用程序都是一个线程.而进程中要执行的任务都是在线程上来实现的,所以说线程是进程的最小执行单元. 进程最少要有一个线程.多线程,顾名思义就是多条线程. ...

  7. thinkphp框架，数据动态缓存后，或数据已读取出来，想分页怎么办

    //读取缓存后赋值到数组,通过array_slice函数处理,如: $blog = S('blogname'); //赋值 $count = count($blog); //条数统计 $page = ...

  8. tomcat多实例

    //结合博主之前的安装tomcat的博文一起看,tomcat多实例就是在不同路径启动多个tomcat,然后在本机不同端口启动 [root@ycj ~]# cd /usr/local/src/ [roo ...

  9. Linux下提权常用小命令

    有些新手朋友在拿到一个webshell后如果看到服务器是Linux或Unix操作系统的就直接放弃提权,认为Linux或Unix下的提权很难,不是大家能做的,其实Linux下的提权并没有很多人想象的那么 ...

  10. jenkins配置自动发送邮件，抄送

    1.安装插件.系统管理-安装插件:可选插件:搜索Email Extension 2.设置全局变量.系统管理-系统设置:a.Jenkins Location 设置发送方邮件--- b.Extended ...