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 ...
随机推荐
- 连接H3C交换机的Console口连不上
一.故障:使用Console线连接交换机的Console口连不上. 处理步骤: 1.先把Console线连接好,一端连接交换机的Console口,另一端连接电脑的USB口. 2.安装Console线驱 ...
- MySQL 基础 查询
别名 查询数据时,如果表名很长,使用起来不方便,此时,就可以为表取一个别名,用这个别名来代替表的名称 .同时为了更好的显示所查询出来的字段,也可以给字段取别名. 一,表作为别名: mysql> ...
- Linux给MySQL创建用户,并分配权限
//登录MYSQL 使用root账号登录 @>mysql -u root -p @>密码 //创建用户 mysql> insert into mysql.user(Host,User ...
- idea没配置Tomcat容器报错及解决方法
servlet报错,提示没有一个容器,需要一个容器来运行,说明没有tomcat容器. 看看idea的配置有没有配置tomcat? 果然没有配置tomcat容器(正常画红框的地方会出现配置的tomcat ...
- Cocos Creator 获取当前 Pageview 翻页到第几页的事件索引
新建一个js,叫做 pageAction写一个方法 pageViewClick:function(event,coustom){ var node = event.node; this.pageInd ...
- PHP、mySQL及Navicat安装·Mac
PHP配置 Mac系统对开发人员非常友好,除了自带Apache外,还带有能与Apache相匹配的服务器端脚本语言PHP,因此,Mac中PHP的启动只需要在Apache服务中进行一下超级简单的配置即可直 ...
- laravel中get()与 first()区别、collection与stdClass的区别
简单的,laravel里get()得到的是一组数据,first()得到的是一个model数据. 从形式上,laravel里每一个model数据(record),在取出的时候都是用的PHP的stdCla ...
- 使用 dom4j 处理 xml (3)
今天想在使用 dom4j 选择节点时,顺便去重,可没有单独去重的方法:倒是有一个可以去重的,还必须提供一个 xpath 作为 排序和去重 的依据. 1.xml 文件 <?xml version= ...
- Excel坐标自动在AutoCad绘图_2
众所周知,Excel对数据处理的功能非常强大,它可以进行数据处理.统计分析已经辅助决策的操作,该软件已经渗透到各个领域.作为一个测绘人,GISer, 也经常利用excel完成一些测量表格的自动化计算, ...
- P1342 请柬
最近一直在做最短路......所以今天就再做一道最短路吧.... 题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤其是古色古香的喜剧片 ...