标签：释放 element css fun 例子 1.2 一个 页面 获取
拖拽是一个非常实用的页面效果
1.拖拽的一些应用场景：
1.1. 浏览器标签顺序的切换
1.2. 页面上小组件的拖拽
1.3. 弹出层的拖拽
2 .基本原理
2.1 拖拽的基本原理是：
鼠标在元素上按下的时候，获取鼠标在页面上的位置，计算鼠标相对元素的定位：disX，disY；
鼠标移动的时候，元素跟着鼠标移动，但鼠标相对于元素是不动的，因此，可以根据disX，disY计算元素的位置；
鼠标松开的时候，元素停止移动；
最重要的一点是：需要拖动的那个元素position要设置成absolute或relative，这样才可以移动。
2.2 事件：上述前三个步骤对应三个事件
onmousedown：在用户按下了任意鼠标按钮时触发
onmousemove：当鼠标指针在元素内部移动时重复地触发
onmouseup：在用户释放鼠标按钮时触发
3. 举个例子
HTML代码：
<div id="box"></div>
CSS代码：
1 html, 2 body{ 3 width: 100%; 4 height: 100%; 5 } 6 #box{ 7 width: 100px; 8 height: 100px; 9 background-color: pink; 10 position: absolute; 11 }
JS代码：
1 var box = document.getElementById(‘box‘); 2 box.onmousedown = function(){ 3 var event = event ? event : window.event; 4 5 //获取鼠标相对元素的位置 6 var disX = event.clientX - box.offsetLeft; 7 var disY = event.clientY - box.offsetTop; 8 9 //当鼠标移动的时候，获取元素的位置 10 document.onmousemove = function(){ 11 var event = event ? event : window.event; 12 var iL = event.clientX - disX; 13 var iT = event.clientY - disY; 14 box.style.left = iL +‘px‘; 15 box.style.top = iT +‘px‘; 16 } 17 18 //当鼠标松开的是，元素随着鼠标停止 19 document.onmouseup = function(){ 20 document.onmousemove = null; 21 document.onmouseup = null; 22 } 23 24 }
增加磁性吸附效果，js代码改为：
1 var box = document.getElementById(‘box‘); 2 box.onmousedown = function(){ 3 var event = event ? event : window.event; 4 5 //获取鼠标相对元素的位置 6 var disX = event.clientX - box.offsetLeft; 7 var disY = event.clientY - box.offsetTop; 8 9 //当鼠标移动的时候，获取元素的位置 10 document.onmousemove = function(){ 11 var event = event ? event : window.event; 12 var iL = event.clientX - disX; 13 var iT = event.clientY - disY; 14 15 //磁性吸附 16 if(iL<=50){ 17 iL = 0; 18 }else if(iL>=document.documentElement.offsetWidth - box.offsetWidth - 50){ 19 iL = document.documentElement.offsetWidth- box.offsetWidth; 20 } 21 if(iT<=50){ 22 iT = 0; 23 }else if(iT>=document.documentElement.offsetHeight - box.offsetHeight - 50){ 24 iT = document.documentElement.offsetHeight- box.offsetHeight; 25 } 26 box.style.left = iL +‘px‘; 27 box.style.top = iT +‘px‘; 28 } 29 30 //当鼠标松开的是，元素随着鼠标停止 31 document.onmouseup = function(){ 32 document.onmousemove = null; 33 document.onmouseup = null; 34 } 35 }
标签：释放 element css fun 例子 1.2 一个 页面 获取
原文地址：http://www.cnblogs.com/qm57bk/p/7751505.html
