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. 【转】mysql保存图片技术决定:保存二进制文件还是只保存图片相对路径,图片放在硬盘上面?

    最近遇到上面这个问题,一开始我就果断否决了数据库保存图片的策略,主要是太蠢!事实上我的决定是正确的,我仅仅理解为mysql读写性能提高的境界,具体为什么可以提高?很模糊,知道我看到了这里: 大佬做的实 ...

  2. less is more,so 只记 less

    less + 文件名 1.Enter键 :向下翻一行 2.空格键 :向下翻一屏 3.j键 :想下翻一行 4.k键 :向上翻一行 5.f键 :向下翻一屏 6.b键 : 向上翻一屏 7.d键 :向下翻半屏 ...

  3. get请求02

    import requests r = requests.get("http://www.baidu.com") print(r.status_code) #状态码 print(r ...

  4. centos7.5 安装gaussian09和 gaussianview4

    一.安装gaussian09 1. 解压安装包 $ mkdir Gaussian$ cd Gaussian$ tar xvf g09_linux.tar 2. 设置环境变量 #gaussian09 e ...

  5. Oracle sql function LISTAGG

    select business_unit, voucher_id, listagg( vat_txn_type_cd, ',') within group (order by business_uni ...

  6. PHP、mySQL及Navicat安装·Mac

    PHP配置 Mac系统对开发人员非常友好,除了自带Apache外,还带有能与Apache相匹配的服务器端脚本语言PHP,因此,Mac中PHP的启动只需要在Apache服务中进行一下超级简单的配置即可直 ...

  7. angular2--Tour of Heroes学习和分析--路由

    引入路由模块时的一个报错 No base href set. Please provide a value for the APP_BASE_HREF token or add a base elem ...

  8. asp.net 去掉小数点后面多余的0,本身为0则不显示

    很多时候,比如gridview内,不想现实从数据库带出的多余小数 ,比如 4.01000 ,可显示为 4.01 如果是 0.00000, 则显示为空白 /// <summary> /// ...

  9. Vue系列之 => 结合webpack使用vue-router

    安装 vue-router cnpm i vue-router -S index.html <!DOCTYPE html> <html lang="en"> ...

  10. IO字节流概念

    1.输入和输出概念: 输入:硬盘到内存为了使用: 输出:内存到硬盘为了保存: 2.一切皆为字节: 计算机只识别二进制数字,一个字节为8个二进制数字: 存储在硬盘是字节,传输也是字节: