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 调整大小的更多相关文章

  1. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  2. vue实现拖动div元素

    html: <div id="app1"> <div v-drag class="drag"></div> <div ...

  3. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  4. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  6. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  7. [可拖动DIV]刚开通博客顺便就写了点东西!

    说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...

  8. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  9. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

随机推荐

  1. BZOJ.3938.Robot(李超线段树)

    BZOJ UOJ 以时间\(t\)为横坐标,位置\(p\)为纵坐标建坐标系,那每个机器人就是一条\(0\sim INF\)的折线. 用李超线段树维护最大最小值.对于折线分成若干条线段依次插入即可. 最 ...

  2. 字节跳动冬令营网络赛 D.The Easiest One(贪心 数位DP)

    题目链接 \(x:\ 11010011\) \(y:\ 10011110\) (下标是从高位往低位,依次是\(1,2,...,n\)) 比如对于这两个数,先找到最高的满足\(x\)是\(0\),\(y ...

  3. CRM项目(一)

    知识点: 1. 类可以当做字典的key 2. django中的model所在app名称.以及小写类名. 上述两点可以由以下代码实现: def index(request): # print(m1.Us ...

  4. phpmyadmin#1045 无法登录 MySQL 服务器

    使用lnmp安装wordpress在登录phpmyadmin数据库的时候诡异的出现了   phpmyadmin#1045 无法登录 MySQL 服务器,解决方法如下: 1 修改root的密码—不可以行 ...

  5. node+express跨域处理

  6. ZOJ3951 : Independent Set

    如果知道了树的形态,那么可以树形DP,每个时刻只需要计算必选根的独立集个数以及必不选根的独立集个数. 那么现在知道独立集个数,要构造出树,可以考虑DP这棵树的形态,然后将之前树形DP的值作为现在DP的 ...

  7. Redis设计与实现:读书笔记之二

    1.数据库 Redis服务器一般包含多个db,默认16个. 切换数据库 每个redis客户端都有自己的目标数据库,默认为0,可以通过select 1,切换数据库. 设置键的生存周期和过期时间 PTTL ...

  8. springmvc注解方式

    https://www.cnblogs.com/shanheyongmu/p/5865589.html

  9. SuperWebSocket与Cocos2dx通信时执行不了命令的问题

    要修改WebSocketSession.cs 中的方法 string IWebSocketSession.GetAvailableSubProtocol(string protocol) { if ( ...

  10. Docker 常用命令(四)

    1. 查看容器中的进程信息: docker top 772d23 查看容器的详细信息: docker inspect 772d23 持续更新日志 docker logs -f 7732dx