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. 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛.B.跳一跳,很简单的(Hash 倍增)

    题目链接 首先变换的周期是\(26\),而所有字符是同时变的,所以一共就只有\(26\)种树,我们对\(26\)棵树分别处理. 求某节点到根路径上的字符串,可以从根往下哈希,\(O(n)\)预处理出. ...

  2. BZOJ.4182.Shopping(点分治/dsu on tree 树形依赖背包 多重背包 单调队列)

    BZOJ 题目的限制即:给定一棵树,只能任选一个连通块然后做背包,且每个点上的物品至少取一个.求花费为\(m\)时最大价值. 令\(f[i][j]\)表示在点\(i\),已用体积为\(j\)的最大价值 ...

  3. Axis2部署后服务器端出现异常信息

    客户端可以正常调用Web Service,但服务端控制台报出如下异常:2013-09-05 09:49:12,965:[http-8080-2] at org.apache.axis2.dataret ...

  4. Linux下MySQL 安装配置

    MySQL 是最流行的关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言. MySQL由于其体积小.速度快 ...

  5. 潭州课堂25班:Ph201805201 django 项目 第九课 图片验证码前台实现,判断用户是否注册功能实现 (课堂笔记)

    u胎代码实现 : 针对每一个 app 写个 js 脚本, 先给 users 的 app 应用创建个 js:在指定目录下的 js 文件夹下,创建 users 文件夹,下创建 suth.js ,图片验证 ...

  6. python中 is 和 == 的区别

    is 是比较两个引用是否指向了同一个对象(引用比较). == 是比较两个对象是否相等.

  7. JsonServer服务环境搭建

    在前后端分离的这种工作模式下,分工明确,各司其职.前端负责展示数据,后端提供数据.然而,在这种过程中对于接口的规范 需要提前制定好.例如根据规范提前模拟数据,这个时候就比较麻烦的.JsonServer ...

  8. PHP读写Excel

    PHP读写Excel PHP读写Excel可以通过第三方库phpexcel比较优雅地完成,由于PHP对于字符串处理的优势,读写PHP非常方便. 库导入 这里使用composer包管理工具,以下是配置信 ...

  9. django之视图获取用户请求相关信息以及请求头

    def index(request): print(type(request)) print(request.environ['HTTP_USER_AGENT'])#字典格式 print(reques ...

  10. 【分治-前缀积后缀积】JS Window @2018acm徐州邀请赛G

    问题 G: JS Window 时间限制: 2 Sec  内存限制: 512 MB 题目描述 JSZKC has an array A of N integers. More over, he has ...