<!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. Scala数组| 集合

    arrays :+ 5尾部   头部5 +: arrays TODO 声明不可变数组,不能删; 默认情况下,scala中集合的声明全都是不可变的 val arrays: Array[Int] = Ar ...

  2. 问题集 & 知识点

    芝士 [事件绑定的三种方法] 在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例. 绑定 ...

  3. BZOJ.5092.[Lydsy1711月赛]分割序列(高维前缀和)

    题目链接 \(Description\) \(Solution\) 首先处理\(a_i\)的前缀异或和\(s_i\).那么在对于序列\(a_1,...,a_n\),在\(i\)位置处分开的价值为:\( ...

  4. 一种常见的maven打包后同名文件冲突错误

    在使用一些开源框架的时候(比如spark.hadoop.lucene等),偶尔会见到说找不到某个具体实现类或者某个配置(比如spark的akka配置)不见了. 部分例子如下: [Lucene]An S ...

  5. 常见问题：bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  6. java jdbc操作数据库通用代码

    1.准备工作 1> 新建一个配置文件,名为jdbc.properties将其放入src中 2>在项目中导入jdbc驱动,注意连接不同的数据库,所用到的驱动是不一样的,这些在网上都能找到 具 ...

  7. php正则表达式 剔除字符串中 ,除了汉字的字符（只保留汉字） php 正则 只保留汉字，剔除所有符号

    <?php //提取字符串中的汉字其余信息剔除 $str='f龙,真 .,.,.?!::·…~&@#,.?!:;.……-&@#“”‘’〝 "〞＇´＇>< ...

  8. Selenium 3----警告框处理+下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  9. 转：浅谈SimpleDateFormat的线程安全问题

    转自:https://blog.csdn.net/weixin_38810239/article/details/79941964 在实际项目中,我们经常需要将日期在String和Date之间做转化, ...

  10. windows创建定时任务执行python脚本

    一.创建定时任务 \ [程序或脚本]文本框中填的是Python编译器的名称,一般就是python.exe, [起始于]文本框中填的是Python编译器的目录,上图中假设你的Python编译器的完整路径 ...