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. vue js实现获取两个日期之间所有日期

    https://blog.csdn.net/m0_37852904/article/details/85790793 // 计算续住的总日期列表 getAll(begin, end) { let ar ...

  2. composer学习之路01

    以前对composer还是的理解很模糊,直到最近看一些资料,稍微有了一些浅显的了解. /* composer依赖包管理工具,如果一个项目是windows操作系统,那么composer就是360,他可以 ...

  3. spring boot集成aop实现日志记录

    1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. 深入了解webpack前,可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  5. laravel----------laravel一些注意事项和一些说明

    1.php artisan key:generate 解释:.env文件里面的APP_KEY参数设置为一个随机字符串也就是这个key是一个随机字符串,用于实现框架中的encrypt(加密)服务,   ...

  6. GIT学习总结--从git上拉取代码到本地

    步骤: 1.输入公司的git地址https://git5b.XXXXX.com,回车: 2.在登录框中输入用户名和密码: 3.选取需要的文件下的代码 4.复制该项目的地址 5.在本地的windows命 ...

  7. Python学习笔记(Ⅱ)——循环/选择/函数

    一.循环结构 python中提供了for循环和while循环两种操作,没有do……while语句. 1.for循环: 与其他语言中for循环的常见的写法如for (int i=0;i<10;i+ ...

  8. Ubuntu下载

    由于官网服务器在国外,下载速度奇慢,所以我们可以利用阿里云镜像下载ubuntuubuntu 14.04:http://mirrors.aliyun.com/ubuntu-releases/14.04/ ...

  9. vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives

    vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives Vue 2.2.0+的版本里,当在组件 ...

  10. maven的两种打包插件 ,防止 将无用文件打入META_INF,找不到主类的问题

    第三种 打依赖包 将依赖其他jar的包都打进去 <plugin> <artifactId>maven-assembly-plugin</artifactId> &l ...