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 & ...
随机推荐
- 基于Systick系统时钟延时的LED闪烁灯
1.回顾我们的51 单片机编程,当我们需要做系统延迟的时候,最常采用的一种方式就是使用for 循环的空语句等待来实现. 当然,在STM32 里面也可以这么实现.但是在STM32 的Cortex 内核里 ...
- [c++] opencv加载png
1.cvloadimage载入png文件时,默认的第2个参数是1,即CV_LOAD_IMAGE_COLOR,生成的iplimage对象的channel数是3,而不是4,丢失了第4通道.需要改为cvlo ...
- 反编译安卓apk以及jar包
https://www.jianshu.com/p/c9b553cf2b51 https://blog.csdn.net/bzlj2912009596/article/details/78268896
- Centos 6 安装 Mysql 5.6
参考:http://www.runoob.com/mysql/mysql-database-import.html 数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个 ...
- Git删除本地修改
git如何删除本地所有未提交的更改 git checkout . && git clean -xdf 一般 git clean都是配合git reset 使用的 如果你有的修改已经加入 ...
- Tyrion 中文文档(含示例源码)
原文出处: Mr.Seven Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Ty ...
- 深入理解this,bind、call
直接看this 直接看call和bind 首先放一道题: var a={ a:'haha', getA: function(){ console.log(this.a); } } var b= { a ...
- SqlHelper分享
using Model; using System; using System.Collections.Generic; using System.Configuration; using Syste ...
- 【枚举】Consonant Fencity @upcexam5110
时间限制: 3 Sec 内存限制: 512 MB 题目描述 There are two kinds of sounds in spoken languages: vowels and consonan ...
- Go语言栈定义及相关方法实现
// stack 栈 package Algorithm import ( "errors" "reflect" ) // 栈定义 type Stack str ...