如何拖拽DIV边线并左右自适应改变大小?
//树图拉伸
jQuery(function ($){
var doc = $(document), dl = $(".side-tree"), dc = $(".tree-content");
var sum = dl.css("left") + dc.width() +
$(".tree-handler").mousedown (function (e) {
var tree = $(this);
var deltaX = e.clientX-(parseFloat(tree.css("left")) || parseFloat(tree.prop("clientLeft")));
doc.mousemove(function (e){
var lt = e.clientX - deltaX;
lt = lt < 188 ? 188 : lt;
dl.width(lt-86)//目录树宽
$(".tree-handler").css("left",dl.width()+42);//拖动把手位置
var treeConLeft = $(".tree-handler").css("left");//右侧内容区位置
var reg = new RegExp("px","g");
treeConLeft = treeConLeft.replace(reg, "");
treeConLeft = treeConLeft-26 +"px";
$(".tree-content").css("margin-left",treeConLeft)
});
})
doc.mouseup (function(){
doc.unbind("mousemove");
});
doc[0].ondragstart = doc[0].onselectstart = function (){
return false;
};
});
});
<div class="row tabX" style="position: sticky;overflow-x: hidden">
<table class="table table-bordered table-hover text-center">
<thead class="bg-green">
<tr>
</tr>
</thead>
</table>
</div>
如何拖拽DIV边线并左右自适应改变大小?的更多相关文章
- 简洁的drag效果,自由拖拽div的实现及注意点
偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
- JS拖拽div(移动)
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...
- 可拖拽div
在开发的时候需要一个可拖拽的prompt弹框.自己写了一个,大概思路为: 1.获取鼠标左键按下移动的起点坐标(x,y). 2.获取div的left和top属性. 3.得到鼠标坐标到左上角的距离(x-t ...
- 自由拖拽DIV实现
最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- dom 拖拽div
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
随机推荐
- 「NOIP2015」运输计划
传送门 Luogu 解题思路 首先这题可以直接二分答案,然后我们每次都把属于长度大于二分值的路径上的边标记一次,表示选这条边可以优化几条路径. 然后我们显然是要选一条覆盖次数等于需要覆盖的路径数并且长 ...
- vs2010编译C++ 友元函数
// CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...
- 51nod 1368:黑白棋 二分图最大匹配
1368 黑白棋 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 收藏 取消关注 有一个N*M的棋盘(1<=N,M< ...
- 2-10 就业课(2.0)-oozie:6、通过oozie执行mr任务,以及执行sqoop任务的解决思路
执行sqoop任务的解决思路(目前的问题是sqoop只安装在node03上,而oozie会随机分配一个节点来执行任务): ======================================= ...
- 编程题目:输入一个链表,输出该链表中倒数第k个节点
两种方法 1.在链表的初始化数据中加入 num 数据, 每添加一个节点,num加1,每删除一个节点,num减1 查找倒数第k个元素,即 指向第一个节点的指针向后移动 num - k 步. 2.使用两个 ...
- 【pwnable.tw】 death_note
题目逻辑比较简单,大概增加和删除和打印三个功能: show函数中,打印各日记内容,由于这题没有给出libc文件,应该不需要泄露地址,估计用处不大: delete函数中,正常的free,然后指针修改为n ...
- 需要多个参数输入时-----------------考虑使用变种的Builder模式
业务需求: 创建一个不可变的Person对象,这个Person可以拥有以下几个属性:名字.性别.年龄.职业.车.鞋子.衣服.钱.房子. 要求: 其中名字和性别是必填项,而其他选填项可以根据情况自由输入 ...
- 016.Oracle数据库,取本季度第一天,取本季度最后一天
/*取本季度第一天,取本季度最后一天*/ SELECT trunc(sysdate, 'Q') AS 本季度第一天 , add_months(trunc(sysdate, ) AS 本季度最后一天 F ...
- 《新标准C++程序设计》4.7-4.9(C++学习笔记17)
一.重载类型强制转换运算符 在C++中,类型的名字(包括类的名字)本身也是一种运算符,即类型强制转换运算符.类型强制转换运算符是单目运算符,也可以被重载,但只能重载为成员函数,不能重载为全局函数.经过 ...
- (一)微信小程序环境搭建
1 注册 首先 打开(https://mp.weixin.qq.com/)微信公众平台官网 选着 小程序 之后 在新的页面选择 选着前往注册 按照提示注册 注意:个人版和企业版有一定的区别 2 开发者 ...