实例—完美拖拽
2015-11-02 23:59
127 查看
实现对div的拖拽
js
css
html
js
window.onload=function(){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); drag(oDiv1); drag(oDiv2); function drag(obj) { obj.onmousedown=function(ev){ var oEvent=ev||event; var disX=oEvent.clientX-obj.offsetLeft; var disY=oEvent.clientY-obj.offsetTop; obj.onmousemove=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.onmouseup=function(){ obj.onmousemove=null; obj.onmouseup=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
<div id="div1"></div> <div id="div2"></div>
相关文章推荐
- nginx php 配置
- centos linux从无到有安装wordpress
- 曾经的曾经
- c++调用ado链接mssql数据库详解
- 利用Spring的AbstractRoutingDataSource解决多数据源的问题
- 机器学习/数据挖掘之中国大牛
- Hibernate持久化对象的生命周期详解
- 无返回值的函数交换参数
- OC学习第三站
- POJ3233(快速幂思想)
- centos免密码登陆
- 动态规划基本思想
- hdu 1102 Constructing Roads
- Scrum Meeting---Seven(2015-11-2)
- 三十岁意味着什么?
- 娱乐门户网站
- 数据结构实验2(设计哈弗曼编码和译码系统)
- 乘积最大的拆分
- ListView学习
- background总结