<!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. mfc简单框架的分析和原理记录

    由于最近在准备考试,可能博客的更新有点慢(呵,我又为自己的懒惰和拖延找借口,总之有时间就更新) 一.菜单 1.在windows中,菜单资源的识别通过HMENU句柄识别 ,但是这个开发过程比较繁琐 2. ...

  2. Android系统源代码目录结构 “Android源代码”“目录结构”

    在讲述Android源码编译的三个步骤之前,将先介绍Android源码目录结构,以便读者理清Android编译系统核心代码在Android源代码的位置. Android源代码顶层目录结构如下所示: ├ ...

  3. 我的 FPGA 学习历程（04）—— 练习 verilog 硬件描述语言

    这篇讲的是使用 verilog 硬件描述语言编写一个 3 - 8 译码器. 3 - 8 译码器是一个简单的组合逻辑,用于实现并转串,其输入输出关系如下: | 输入  |  输出  | -------- ...

  4. XIV Open Cup named after E.V. Pankratiev. GP of America

    A. Ancient Diplomacy 建图,同色点间边权为$0$,异色点间边权为$1$,则等价于找一个点使得到它最短路最长的点的最短路最小,Floyd即可. 时间复杂度$O(n^3)$. #inc ...

  5. js 复制（自动）

    <script type="text/javascript"> document.writeln("<input type=\'text\' id=\' ...

  6. PHP定界符<<<EOF

    PHP定界符<<<EOF 一.为什么需要使用定界符: 因为在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况, 如果用传统的输出方法 ——按字符串输 ...

  7. 对于服务器AdminServer, 与计算机Machine-0相关联的节点管理器无法访问

    控制台启动server时报"对于服务器server-1与计算机machin<!--StartFragment -->对于服务器AdminServer, 与计算机Machine-0 ...

  8. Jmeter初步

    Jmeter 3. 去掉没有必要的结果记录 对于一些不必要的日志信息可以暂时不要记录. 例如:结果树. 当然可以勾选记录那些失败的日志. 聚合报告中,点击  configure,根据需求设置自己想要保 ...

  9. __x__(23)0907第四天__浏览器默认样式

    浏览器默认样式:         为了美观,浏览器为了在页面没有样式时,也可以有一个较好的显示效果,默认设置若干 margin,padding. 作为开发人员,在CSS编写最初,一般都会清除默认样式, ...

  10. ASPOSE.Word 开发资料整理

    1.总体说明:操作主要涉及两个对象Document及DocumentBuilder Document主要用来获取文档中的节点,DocumentBuilder主要用于实现文档内容的写入 doc_Oper ...