js 可拖动div 调整大小
dragBorder: function (parent, right, bottom, bottomRight) {
var isDownRight = false;
var isDownBottom = false;
var doc = $(document);
var p = $('#' + parent);
var r = $('#' + right);
var b = $('#' + bottom);
var br = $('#' + bottomRight);
var mouseStartPos = {};
r.mousedown(function (e) {
isDownRight = true;
mouseStartPos.x = e.clientX;
mouseStartPos.y = e.clientY;
});
b.mousedown(function (e) {
isDownBottom = true;
mouseStartPos.x = e.clientX;
mouseStartPos.y = e.clientY;
});
br.mousedown(function (e) {
isDownBottom = true;
isDownRight = true;
mouseStartPos.x = e.clientX;
mouseStartPos.y = e.clientY;
});
var opw = p.width();
doc.mousemove(function (e) {
// right
if (isDownRight) {
var l = e.clientX - mouseStartPos.x;
var w = parseInt(l) + parseInt(opw);
p.width(w);
}
});
var oph = p.height();
doc.mousemove(function (e) {
// bottom
if (isDownBottom) {
var t = e.clientY - mouseStartPos.y;
var h = parseInt(t) + parseInt(oph);
p.height(h);
}
});
doc.mousemove(function (e) {
// bottomRight
if (isDownBottom) {
var l = e.clientX - mouseStartPos.x;
var w = parseInt(l) + parseInt(opw);
p.weight(w);
var t = e.clientY - mouseStartPos.y;
var h = parseInt(t) + parseInt(oph);
p.height(h);
}
});
r.mouseup(function () {
isDownRight = false;
opw = p.width();
});
b.mouseup(function () {
isDownBottom = false;
oph = p.height();
});
br.mouseup(function () {
isDownBottom = false;
isDownRight = false;
opw = p.width();
oph = p.height();
});
}
this.dragBorder('chatWindow', 'chatRightGragClass', 'chatBottomGragClass', 'chatblockGragClass');
js 可拖动div 调整大小的更多相关文章
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- vue实现拖动div元素
html: <div id="app1"> <div v-drag class="drag"></div> <div ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- javascript拖动div
div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- [可拖动DIV]刚开通博客顺便就写了点东西!
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
- 拖动DIV
链接:https://www.cnblogs.com/joyco773/p/6519668.html 移动端:div在手机页面上随意拖动 1 <!doctype html> 2 & ...
随机推荐
- set_include_path和get_include_path用法详解
首先set_include_path这个函数呢,是在脚本里动态地对PHP.ini中include_path进行修改的.而这个include_path呢,它可以针对下面的include和require的 ...
- 备份LeetCode OJ自己编写的代码
常泡LC的朋友知道LC是不提供代码打包下载的,不像一般的OJ,可是我不备份代码就感觉不舒服- 其实我想说的是- 我自己写了抓取个人提交代码的小工具,放在GitCafe上了- 不知道大家有没有兴趣 ht ...
- 等差数列 [USACO Training Section 1.4]
题目描述 一个等差数列是一个能表示成a, a+b, a+2b,…, a+nb (n=0,1,2,3,…)的数列. 在这个问题中a是一个非负的整数,b是正整数.写一个程序来找出在双平方数集合(双平方数集 ...
- PAT Basic 1005
1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...
- weak_ptr_c++11
unique_ptr 替代了原来的auto_ptr,指向对象具有唯一性,即同一时间只能有unique_ptr指向给定对象(和auto_ptr不同是禁止拷贝语义,通过移动语义替代) unique_ptr ...
- Linux之nfs服务
1.二进制安装nfs 2.作为共享存储挂载在三台web的网站根目录下实现,在任意一台web上修改的结果,其余两台都可以看到 [root@localhost ~]# yum install rpcbin ...
- CSS_对齐
2016-10-25 <css入门经典>第15章 1.text-align属性: 块属性内部的文本对齐方式.该属性只对块盒子有意义,内联盒子的内容没有对齐方式.(注意:只是盒子内部的内容对 ...
- 唯美PS转手绘之SAI篇_百度经验
唯美PS转手绘之SAI篇 https://jingyan.baidu.com/article/fd8044fad3d5c05030137a5f.html
- Java知识回顾 (7) 继承、多态与接口、封装
一.继承 1.1 继承的特性 子类拥有父类非 private 的属性.方法. 子类可以拥有自己的属性和方法,即子类可以对父类进行扩展. 子类可以用自己的方式实现父类的方法. Java 的继承是单继承, ...
- [web 前端] mobx教程(一)-mobx简介
opy from : https://blog.csdn.net/smk108/article/details/84777649 Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库.M ...