鼠标拖拽吸附效果
JavaScript鼠標拖動+自動吸附實例
學了幾天的JavaScript，自己動手做了一個簡單的鼠標拖動的實例，拖動過程中科自動檢測與目標容器的距離，在一定的距離范圍內可以自動將被拖動的元素加入到目標容器中，希望對開始學習javascript的童鞋有用……
先看看效果圖（Chrome、FireFox、Opera、Safari測試通過）：
效果圖（虛線框：目標對象 ? ?藍色填充透明框：臨時拖動對象 ? 紅色填充框：被拖動對象）
主要思路：首先給要拖動的div添加一個鼠標按下(mousedown)事件、給document對象添加鼠標移動(mousemove)事件和鼠標彈起(mouseup)事件。鼠標開始移動的時候創建一個臨時的拖動對象（temp），移動過程中改變臨時拖動目標的位置，鼠標釋放時將被拖動的div（elem）的位置設置為臨時拖動目標temp的位置，然后移出臨時拖動目標。移動過程中，同時還檢測了拖動的對象和目標div的位置關系，如果碰撞（可以設置吸附的范圍），則自動吸附（將被拖動的對象加入到目標對象中），需要說明的是：這里簡單起見，并沒有真正的把被拖動對象加入到目標對象中，只是設置了被拖動對象的位置。
鼠標按下時：獲取被拖動元素的位置和鼠標按下的位置，設置拖動的標志（isDrag）值為true。
elem.onmousedown = function(event){//鼠標按下isDrag = true;startX = parseInt(this.style.left||getCSSValue(this,'left'));startY = parseInt(this.style.top||getCSSValue(this,'top'));mX = event.pageX;mY = event.pageY;};鼠標移動時：如果isDrag為true，并且temp對象不存在，則創建temp對象，并根據鼠標的位置計算并設置temp的位置。
document.onmousemove = function(event){//鼠標移動this.innerHTML = 'Mouse Position('+event.pageX+','+event.pageY+')';if(isDrag){//當前正在移動if(temp == undefined){//temp臨時拖動目標不存在temp = document.createElement('div');temp.id = 'drag';temp.className = 'temp';document.body.appendChild(temp);//將temp臨時拖動目標添加到頁面中}//改變位置temp.style.left = (startX + event.pageX - mX) + 'px';temp.style.top = (startY + event.pageY - mY) + 'px';//檢測是否在目標范圍內if(checkIntersect(temp,$('target'),20)){//在范圍內$('target').style.border = '2px #F00 dashed';$('target').style.webkitAnimationName = 'light';//閃爍動畫$('target').style.webkitAnimationDuration = '1s';$('target').style.webkitAnimationDelay = '0.5s';$('target').style.webkitAnimationIterationCount = '100';}else{//不在范圍內$('target').style.border = '2px #09F dashed';$('target').style.webkitAnimationName = '';}}};說明：這里的mousemove事件并不是添加到被拖動對象（elem）上面，如果添加到elem上面，那么鼠標如果移動太快一旦鼠標離開了elem對象，那么就會出現問題。
鼠標釋放時：檢測碰撞結果，根據情況設置被拖動對象（elem）的位置，如果以碰撞，則根據目標div的位置設置被拖動對象（elem）的位置，否則根據temp的位置來設置被拖動對象（elem）的位置；
document.onmouseup = function(){//鼠標釋放isDrag = false;if(checkIntersect(temp,$('target'),20)){elem.style.left=$('target').offsetLeft+'px';elem.style.top=$('target').offsetTop+'px';}else{elem.style.left=temp.offsetLeft+'px';elem.style.top=temp.offsetTop+'px';}document.body.removeChild(temp);//移出臨時拖動目標temp = null;$('target').style.border = '2px #09F dashed';$('target').style.webkitAnimationName = '';//取消閃爍};=======================================================
用到的其他函數：在設計過程中，我們需要或許某個元素樣式的一些值，如果我們采用行內式（即將樣式寫在元素標簽里面的style屬性里面），我們可以采用“obj.style.left”類似這樣的語法來或許，但是如果我們的樣式采用了內嵌式（將CSS寫在<head>與</head>之間，并且用<style>和</style>標記進行聲明）或者鏈接式（用類似這樣的<link href="css.css" type="text/css" rel="stylesheet">方式導入外部樣式表）、導入式（采用import語句），我們就無法從上面的方式中獲取樣式的相關值，但是我們可以用其他的方法：IE下元素有currentStyle對象，其他瀏覽器采用document.defaultView.getComputedStyle（）方法，這樣可以獲取樣式屬性的值。代碼如下：
function getCSSValue(obj,key){//獲取元素CSS值if(obj.currentStyle){//IEreturn obj.currentStyle[key]; }else{//!IEreturn document.defaultView.getComputedStyle(obj,null)[key];}}另外，檢測碰撞的函數;
function checkIntersect(obj1,obj2,distance){//檢測碰撞,distance為吸附的范圍var left1 = obj1.offsetLeft;var top1 = obj1.offsetTop;var left2 = obj2.offsetLeft;var top2 = obj2.offsetTop;var width1 = obj1.offsetWidth;var height1 = obj1.offsetHeight;var width2 = obj2.offsetWidth;var height2 = obj2.offsetHeight;return (((left1-left2>=0&&left1-left2<width2+distance)||(left2-left1>=0&&left2-left1<width1+distance))&&((top1-top2>=0&&top1-top2<height2+distance)||(top2-top1>=0&&top2-top1<height1+distance)));}?
總結：這里面主要用到了javascript鼠標事件，簡單的DOM節點操作，還有css3的一些新的東西，比如動畫（animation）、圓角（border-radius）、陰影（box-shadow）等知識。
轉載于:https://www.cnblogs.com/wu-hou/p/6739498.html
總結
- 上一篇： 学习中遇到的c++问题，持续更新
- 下一篇： Oracle的JDBC Url的几种方式