js可拖拽的div
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的更多相关文章
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- JS—实现拖拽
JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...
- 简单的div元素拖拽到div
drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- 拖拽改变div的大小
拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- 可以随鼠标拖拽的div
可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- jquery实现可拖拽的div
由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...
随机推荐
- 小程序:scroll-view组件滑动多次触发scroll事件的bug解决
在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求:若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想 ...
- MATLAB绘制函数图
序言 Matlab可以根据用户给出的数据绘制相应的函数图.对于单个2D函数图,需要给出一个行向量x作为函数图上离散点集的横坐标,以及一个与x列数一样的横坐标y作为函数图上点集的纵坐标. 向量x和y的取 ...
- 2018-2019-1 20189203《Linux内核原理与分析》第九周作业
第一部分 课本学习 进程的切换和系统的一般执行过程 进程调度的时机 Linux内核系统通过schedule函数实现进程调度,进程调度的时机就是内核调用schedule函数的时机.当内核即将返回用户空间 ...
- webclient 操作超时
Client.Headers.Add("user-agent", "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/ ...
- C语言第02次作业--循环结构
1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 1- 经过这两周的学习,我深切地体会C语言非常的难(对于我而言).大部分情况都是题目不理解和没有思路,或者编译 ...
- 关于UR=A的测试
当数据库在nomount,mount或者restricted这类特殊状态下,同时动态监听显示状态为BLOCKED,客户端无法直接连接到实例,此时可通过配置UR=A进行连接.最常见的场景就是10g版本的 ...
- leaflet.toolbar.js
leaflet.toolbar.js 参考:https://www.javascriptcn.com/read-38464.html
- dedecms二次开发
安装遇到的问题 修改文件如下 1.date目录下的config.cache.bak.php改成config.cache.php 2install目录下的index.html.install_lock. ...
- 用java语言通过POI实现word文档的按标题提取
最近有一个项目需要将一个word文档中的数据提取到数据库中.就去网上查了好多资料,最靠谱的就是用poi实现word文档的提取. 喝水不忘挖井人,我查了好多资料就这个最靠谱,我的这篇博客主要是借鉴htt ...
- Linux删除奇怪名字文件
use ls -ilrt get filenum and use find ./ -inum filenum -exec rm '{}' \; del it