function chatDrag(div1) {
div1.onmousedown = function (ev) {
var oevent = ev || event;
var distanceX = oevent.clientX - div1.offsetLeft;
var distanceY = oevent.clientY - div1.offsetTop;
document.onmousemove = function (ev) {
var oevent = ev || event;
div1.style.left = oevent.clientX - distanceX + 'px';
div1.style.top = oevent.clientY - distanceY + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
}

var div1 = document.querySelector(".chatContent");
chatDrag(div1);

js可拖拽的div的更多相关文章

  1. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  2. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  3. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

  4. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  5. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  6. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  7. 可以随鼠标拖拽的div

    可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  9. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

随机推荐

  1. 004-数据结构之ADT-栈与队列【数组方式实现】

    一.ADT 在介绍抽象数据类型的时候,先看看什么是数据类型,在Java中可能首先会想到像 int,double这样的词,这是Java中的基本数据类型,一个数据类型会涉及到两件事: ①.拥有特定特征的数 ...

  2. python 使用 PIL 和 matplotlib 获取图片像素点处理之后再写入

    python 版本 3.x 首先安装 PIL 由于PIL仅支持到Python 2.7,加上年久失修,于是一群志愿者在PIL的基础上创建了兼容的版本,名字叫Pillow,支持最新Python 3.x,又 ...

  3. GAITC 2019全球人工智能技术大会(南京)

    2019年5月25日至26日,由中国人工智能学会主办,以“交叉.融合.相生.共赢”为主题的2019GAITC将在南京全新亮相. 2019 全球人工智能技术大会(2019 GAITC)以“前端引领.深度 ...

  4. linux----------centos下添加环境变量

    1.添加PHP的环境变量.如图操作 其中在 /etc/profile里面编辑的内容是:只加了这一行,箭头所指的那一行. 2.需要添加其他环境变量就在后面用 :追加 PATH=$PATH:/usr/lo ...

  5. Linux 常用命令,处理端口和Tomcat,mysql

    查看端口占用 1.lsof -i:端口号 2.netstat -tunlp|grep 端口号 都可以查看指定端口被哪个进程占用的情况 kill -9 进程号    强制结束进程 启动 1.使用 ser ...

  6. 北京大学Cousera学习笔记--3-计算导论与C语言基础-第一讲.计算机的基本原理-计算机怎么计算-数的二进制

    思考问题 1.“数”在计算机中是如何表示的? 2.逻辑上“数”是怎么运算的? 3.物理上“数”的计算是怎么实现的? 从图灵机计算问题得出: 1.字母表中的符号越多(几进制),读入移动次数减少,但程序数 ...

  7. 求你显示pdf

    123 <iframe src='http://km.shengaitcm.com/ADC/_layouts/15/WopiFrame.aspx?sourcedoc=%2FADC%2FDocLi ...

  8. Python中的sys.path.append()

    当我们导入一个模块时:import  xxx,默认情况下python解析器会搜索当前目录.已安装的内置模块和第三方模块 当运行脚本文件和导入模块不再同一目录下 import sys sys.path. ...

  9. CentOS 7 安装Apache 2.4.39

    使用源码在CentOS 7下安装 apache 2.4.39,之前趟了一遍,简单做个笔记. STEP 1 安装apr STEP 1.1 检查是否安装apr [root@study ~]# yum li ...

  10. zimbra填坑记录

    邮件服务器上架,问题记录. 1.DNS解析设置,zimbra收发邮件均使用统一域名,mail.xxxx.com.cn,因此在做SMTP,POP,MX记录时均应指向此域名. 2.实际上架内部网络和安装所 ...