<!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. js中一个对象中遇到一个相同的key所对应的value值相加

    如图: 变成: js原生如下: var abc=[ {typeid:1,ade:1}, {typeid:2,ade:1}, {typeid:1,ade:2}, {typeid:1,ade:2}, {t ...

  2. 程序猿最浪漫的表白，肯定会得到你的她——Jason niu 原文来自GitHub，本人已部分修改

    程序猿最浪漫的表白,肯定会得到你的她——Jason niu    原文来自GitHub,主页本人已部分修改,感谢程序猿大神wuxia2001和hackerzhou的开源,感谢这两位大神! 视频结果展示 ...

  3. Linux终端复用神器-Tmux使用梳理

    Tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD,采用BSD授权.使用它最直观的好处就是,通过一个终端登录远程主机并运行tmux后,在其中可以开启多个控制台而无需再“ ...

  4. flume进阶

    上一张初识里面谢了一些flume入门的内容,其实在真正工作环境里面这种情况使用的是很少的,大部分情况,我们可能需要从多台设备的日志里面汇总收集数据并存储到HDFS上,以便于后期对数据进行处理,真实的情 ...

  5. 远程连接你的linux服务器

    为什么要远程连接linux 在实际的工作场景中,虚拟机界面或者物理服务器本地的终端都是很少接触的,因为服务器装完系统之后,都要拉倒IDC机房托管,如果是购买的云主机,那更碰不到服务器本体了,只能通过远 ...

  6. 二分三元组 CodeForces - 251A

    题目链接: https://vjudge.net/problem/35188/origin 题目大意: 要求你找到一个 i < j < k时有 a[k]-a[i] <= d的组的个数 ...

  7. PBRT笔记(1)——主循环、浮点误差

    PBRT2与3之间的改动 增加了一个功能完备的BRDF模型,支持体积光照与重要性多重路径采样. 次表面散射,基于光线追踪技术,无需预处理. 解决浮点数四折五入的问题 光子映射 样本生成 第一章多了讲并 ...

  8. CSS文字垂直居中的一些问题

    说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果, div { height:30px; line-height:30px; } 但其实这么做会遇到一个问题:多行文本溢 ...

  9. composer 常用操作

    1.search   查询 例如:composer search redis 2.show   展示 例如: composer show -all  predis/predis 3.require   ...

  10. MFC版链表实现稀疏多项式相加减

    链表实现多项式运算(加减)MFC可视化版 题目 设计一个一元稀疏多项式简单计算器. 基本要求 (1)输入并建立两个多项式: (2)多项式a与b相加,建立和多项式c: (3)多项式a与b相减,建立差多项 ...