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. 136A

    #include <stdio.h> #include <string.h> #define MAXSIZE 110 int main() { int giv[MAXSIZE] ...

  2. 连接oracle数据库

    一.连接oracle数据库 一.windows环境 oracle windows客户端下载地址:http://www.oracle.com/technetwork/topics/winx64soft- ...

  3. 解析key值不确定的json数据

    遇到一个奇葩的需求,一段json的key值是动态的,并且这个key还是有作用的.这就要求在不知道key是多少的情况下去把这段json解析出来. 我用到的方法是迭代器.具体代码如下 JSONObject ...

  4. fork()相关的源码解析

    fork()的真正执行采用的是do_fork()函数,所以下文将从do_fork()函数对fork()进行源码解析.下图是do_fork()的源码函数设计: 从上图我们可以看到do_fork()涉及到 ...

  5. 通过类创建子线程&同步锁

    一.通过类创建子线程 import threading class MyThread(threading.Thread): def __init__(self,num): threading.Thre ...

  6. Hashtable几种常用的遍历方法

    Hashtable 在System.Collection是命名空间李Hashtable是程序员经常用到的类,它以快速检索著称,是研发人员开发当中不可缺少的利器. Hashtable表示键/值对的集合, ...

  7. Sitecore8.2 GeoIP - 在8.2的引擎盖下发生了什么?

    访客互动 - 访客会话的开始 访问者访问Sitecore网站,这被视为一种新的互动.Sitecore对交互的定义是“......联系人与品牌联系的任何一点,无论是在线还是离线”.在我们的例子中,这是网 ...

  8. LR12集合点设置和多个负载生成器策略

    今天给大家分享几个有关LR12的Controller使用过程中的几个常用问题: 一,脚本中添加集合点函数---lr_rendezvous 1,在被测接口事物函数之前加入集合点函数--lr_rendez ...

  9. IP通信基础学习第六周(上)

    CSAM:冲突检测 链路:是指一条无源的点到点的物理线路段,且中间没有任何其它的交换结点. 数据链路:把实现相关规程的硬件和软件加到链路上. 数据链路层的功能:链路管理,信息的传输,流量与差错控制,异 ...

  10. 使用第三方jar时出现的问题

    Eclipse下把jar包放到工程lib下和通过buildpath加载有什么不同(解决找不到类的中级方法) 我通过Eclipse的 User Libranry 将jar导入 Eclipse里面,编译没 ...