博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实例—完美拖拽
阅读量:5031 次
发布时间:2019-06-12

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

实现对div的拖拽

js

window.οnlοad=function(){	var oDiv1=document.getElementById('div1');	var oDiv2=document.getElementById('div2');		drag(oDiv1);	drag(oDiv2);	function drag(obj)	{		obj.οnmοusedοwn=function(ev){			var oEvent=ev||event;			var disX=oEvent.clientX-obj.offsetLeft;			var disY=oEvent.clientY-obj.offsetTop;			obj.οnmοusemοve=function(ev){				var oEvent=ev||event;				var left=oEvent.clientX-disX;				var top=oEvent.clientY-disY;								obj.style.left=left+'px';				obj.style.top=top+'px';			};			obj.οnmοuseup=function(){				obj.οnmοusemοve=null;				obj.οnmοuseup=null;				obj.releaseCapture&&obj.releaseCapture();			};			obj.setCapture&&obj.setCapture();			return false;		};	}};

 css

*{margin:0px;padding:0px;}#div1{width:200px;height:200px;background:red;position:absolute;left:100px;top:100px;}#div2{width:200px;height:200px;background:green;position:absolute;left:400px;top:100px;}

 html

 

转载于:https://www.cnblogs.com/yuanyiying/p/4931983.html

你可能感兴趣的文章
Java操作Excel和Word
查看>>
Oracle 体系结构之ORACLE物理结构
查看>>
ORA-12538: TNS: no such protocol adapter
查看>>
盒子模型
查看>>
局域网协议
查看>>
[HNOI2012]永无乡 线段树合并
查看>>
Spring整合hibernate:3、使用XML进行声明式的事务管理
查看>>
SqlServer之Convert 函数应用格式化日期(转)
查看>>
软件测试领域中的10个生存和发展技巧
查看>>
Camera前后摄像头同时预览
查看>>
HDU 1856
查看>>
课堂作业01--架构师的职责
查看>>
iOS计算富文本(NSMutableAttributedString)高度
查看>>
2017/09/15 ( 框架2)
查看>>
Centos下源码安装git
查看>>
gulp-rev-append md5版本号
查看>>
IO流之File类
查看>>
sql 基础语句
查看>>
CF717A Festival Organization(第一类斯特林数,斐波那契数列)
查看>>
oracle直接读写ms sqlserver数据库(二)配置透明网关
查看>>