js实现可拖拽的div
前言
下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现。 学习张鑫旭代码的同时又了解了几知识点。
1、obj.currentStyle[attr] 和getComputedStyle(obj,false)[attr]。获取DOM非行间样式。 我百度了下currentStyle看到有的说Chrome和FF是不支持的,为了兼容,所以用到了这两个方法。
2、onselectstart。 IE和Chrome适用,防止内容被选中默认是true。
拖拽原理
1、可拖拽的div主要是确定mouseDown事件发生时的DOM承载对象,以及mouseMove时的坐标计算。
2、其次是当拖拽完成时的DOM承载对象。多数会选择document,不知道我理解的对不对?
效果图
js
/**
拖拽div
关键事件:mouseDown, mouseMove,mouseUp
**/ var params={
top:0,
left:0,
currentX:0,
currentY:0,
flag:false
}; /**
obj.currentStyle[attr]
getComputedStyle(obj,false)[attr] 获取DOM非行间样式
**/
var getCss=function(o,key){
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
} var startDrag=function(bar,target,callback){ if(getCss(target,'left')!='auto'){
params.left=getCss(target,'left');
}
if(getCss(target,'top')!='auto'){
params.top=getCss(target,'top');
}
bar.onmousedown=function(event){
params.flag=true;
if(!event){
event=window.even;
bar.onselectstart=function(){ //IE和Chrome适用,防止内容被选中默认是true
return false;
}
}
var e=event;
params.currentX=e.clientX;
params.currentY=e.clientY;
} document.onmouseup=function(){
params.flag=false;
if(getCss(target,"left") !='auto'){
params.left=getCss(target,'left');
}
if(getCss(target,'top') !='auto'){
params.top=getCss(target,'top');
}
}
document.onmousemove=function(event){
var e=event?event:window.event;
if(params.flag){
var nowX=e.clientX,nowY=e.clientY;
var disX=nowX-params.currentX, disY=nowY-params.currentY;
target.style.left=parseInt(params.left)+disX+'px';
target.style.top=parseInt(params.top)+disY+'px';
} if(callback=='function'){
callback(parseInt(params.left)+disX,parseInt(params.top)+disY);
}
}
}
下载地址:http://yunpan.cn/cwTJmDQWtAgLs 访问密码 7d22
js实现可拖拽的div的更多相关文章
- js可以随意拖拽的div的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简单的div元素拖拽到div
drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js插件-简单拖拽
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...
- 拖拽改变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 ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- jquery实现可拖拽的div
由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...
随机推荐
- vim的配置与使用
经历了一次source insight 一言不合就崩溃之后,决定还是花点时间好好配置和学习以下vim 于是找到大神的配置 https://github.com/humiaozuzu/dot-vimrc ...
- listview嵌套gridview,并实现grid元素部分显示以及点击展开与折叠
原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...
- angularJs 指令的理解
指令: 可以把指令理解成为特定的DOM 上运行的函数,指令扩展了这个元素的功能: 例如:ng-click--在DOM元素上绑定了一个click事件的监听,并在监听到事件时运行angular表达式 自定 ...
- 各种android应用模仿源码
V2EX的非官方Android客户端,极力遵循Material Design风格 下载 湘潭大学三翼校园"四季电台" Android客户端 下载 高仿煎蛋客户端 下载 ...
- Ubantu 下安装 tensorflow
# 在 Linux 上: $ sudo apt-get install python-pip python-dev python-virtualenv $ virtualenv --system-si ...
- 导向矢量(Steering Vector)
导向矢量是阵列天线的所有阵元对具有单位能量窄带信源的响应. 由于阵列响应在不同方向上是不同的,导向矢量与信源的方向是相互关联的,这种关联的独特性依赖于阵列的几何结构.对于同一阵元阵列,导向矢量的每一个 ...
- 剑指Offer面试题:34.翻转单词顺序VS左旋转字符串
一.题目一:翻转单词顺序 1.1 题目说明 题目一:输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理.例如输入字符串"I am a st ...
- 从Facebook跑来阿里的赵海平大叔,你要干啥?
赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...
- MySQL 子分区
200 ? "200px" : this.width)!important;} --> 介绍 子分区其实是对每个分区表的每个分区进行再次分隔,目前只有RANGE和LIST分区 ...
- [转]各种移动GPU压缩纹理的使用方法
介绍了各种移动设备所使用的GPU,以及各个GPU所支持的压缩纹理的格式和使用方法.1. 移动GPU大全 目前移动市场的GPU主要有四大厂商系列:1)Imagination Technologies的P ...