博客
关于我
js实现可拖拽的div
阅读量:612 次
发布时间:2019-03-13

本文共 1764 字,大约阅读时间需要 5 分钟。

前言

      下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件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);		}	}}

 

下载地址:  访问密码 7d22

转载地址:http://stbaz.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
查看>>
Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结(78)——MySQL各版本差异整理
查看>>
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>
Mysql学习总结(9)——MySql视图原理讲解与使用大全
查看>>
Mysql学习笔记 - 在Centos7环境下离线安装Mysql
查看>>
MySQL学习笔记十七:复制特性
查看>>
Mysql学习第一课-mysql的定义及sql语句
查看>>
mysql安全模式: sql_safe_updates
查看>>
mysql安装,卸载,连接
查看>>
MySQL安装之没有配置向导
查看>>