幾年前，我參與設計開發一個房產網的項目，我負責前端工作，由於項目經理要求比較高，參考了很多房產類網站比較優秀的功能，想把別人比較優秀的設計和想法集合到一起，那時的設計稿和功能實現，簡直就是改了又改，今天做好的一個很好的效果，可能第二天就要推到重來，算了，不說這些了，還是說說我們今天要講解的案例吧，不知道大家訪問過搜房網沒有（完全沒有做廣告之嫌，搜房網，可以給點廣告費不），其中有一個功能產品經理特別喜歡，那，就是下面的這個：
這是現在的效果，可能改了一些，原來的效果是，里面的這張圖是可以上下左右拖動的，然后房子上面的顯示的樓棟號，也跟着圖片一起移動，當時js能力還不行，未能實現項目經理的要求，不過后來項目經理又把這個效果推掉了，換了另外的一個效果
盡管項目經理不想要這個效果了，但是當時就在我心里留下了一個節，到今天都忘不了這個梗。
好了，這就是我今天想寫這篇博客的初衷，希望能給想實現這類拖拽效果，但是不知道該怎么去實現的同學，提供一種思路，不給青春留遺憾，當然實現拖拽的方法有很多，這里就只介紹JavaScript中的一種方法，慢慢體會一下其中的原理！
好了，梗也說完了，開始正題，我們先要明白，拖拽到底是一個什么東西，你也知道，我也知道，但是我還是想來描述一下：
拖拽就是一個容器，你用鼠標可以在頁面上拖着到處跑，廢話，精確的描述應該是，鼠標移到容器上，然后鼠標按下去，注意要按着不放，然后拖動鼠標，容器能跟着鼠標跑，松開鼠標，容器就停在那里不動了，現實中的例子就是桌子上有一個盒子，我用手放在盒子上，然后移動盒子，手停盒子停，手拿開，盒子不動了，嘻嘻，都懂了哈！
別以為上面說了一堆的廢話，我們可以從中得到很多的信息，總結如下就是：
拖拽 = 鼠標按下 + 鼠標移動 + 鼠標彈上
這樣就完成了一個拖拽任務，好了，原來這就是拖拽的原理，想實現拖拽，自然實現上面的3個動作，便可以模擬拖拽效果，好，對應JavaScript中的語法就是需要實現這3個動作：
onmousedown , onmousemove , onmouseup
實現的代碼就應該是：
obj.onmousedown = function(ev){
obj.onmousemove = function(ev){
} ;
obj.onmouseup = function(ev){
};
}
為什么后面2個動作要寫的里面，好好回味一下，好了，第一步的大概思路就有了，下一步就需要考慮怎么讓物體跟着鼠標一起移動，思路大概是這樣的：
首先物體是需要決定定位的，因為我們需要操作它的left和top值，才能讓它移動，然后就是要考慮鼠標了，鼠標位移，本身就會有一個距離，如果我們知道鼠標移動了多遠，然后把這個距離給物體，那物體是不是也和鼠標一樣，移動了相同的距離，這不就實現拖拽了嗎？哈哈，思路一點點有，感覺萌萌噠~ 現在的問題就是怎么獲取鼠標的距離，如果需要深入了解，請復習一下盒子模型，這里我就不說了，很多大神也有相關的博客，我用一張圖表示一下：
說明：藍色框為屏幕寬高，黑色粗框為瀏覽器可視區寬高（瀏覽器縮小效果），黑色細框為鼠標要拖拽的對象，如圖可知，獲取鼠標的坐標，可以用event.clientX,event.clientY來獲取，哦了；
計算的大致原理可以參照下圖：
說明：左邊為初始位置，右邊為目標位置，原點為鼠標位置，大黑框為瀏覽器可視寬度，小黑框為拖拽對象，看拖拽對象到目標位置的狀態，獲取鼠標的最終位置，再減去鼠標距離對象的差值，再賦值給對象的top,left值，也可以獲取鼠標的位置差值，再用初始的top,left值加上差值，我們采用第一種，第二種也可以，自己去試一下：
obj.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev){
var ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
};
document.onmouseup = function(ev){
var ev = ev || event;
document.onmousemove = document.onmouseup = null;
};
}
這里說明一下：onmousemove和onmouseup之所以用document對象而不用obj對象，是因為如果用obj對象，鼠標在obj內部還好，如果在obj外面的話，拖拽會很怪異，你也可以改成obj體會一下，最后我們在鼠標彈起的時候將事件都清空；
上面的基本拖拽就算完成了，但是細心的同學一定會問，如果頁面上有文字的話，拖拽物體會將文字選中，這效果豈不是怪怪的，沒錯，這是因為拖拽的時候觸發了瀏覽器的默認選擇事件，所以，在拖拽的時候，我們要清除這個默認事件，那怎么清除呢？
下面給一個兼容性寫法：
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble = true; //兼容IE
}
//簡寫成
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
ps：這里寫錯了，寫成了阻止冒泡了，但是就算寫成我們熟悉的阻止瀏覽器默認事件（event.preventDefault() 方法兼容寫法）也是不對的，詳情請參考 兼容所有瀏覽器的阻止瀏覽器默認事件寫法
將上面的代碼放在onmousedown下，鼠標按下就清除瀏覽器默認事件，文字就不會被選中了，好了，一個簡單的拖拽效果就完成了，當然你現在是看不到效果，之所以不給demo鏈接是為了讓你自己試着寫一寫，這樣印象更深刻，
好了，那問題又來了，到這里就這樣完了嗎？。。。。。。按本人的風格，當然沒有，干貨還在后面！
如果我想實現這樣一個效果，就是這一個大的容器里面（可以是box，也可以是document），怎么樣能讓我們的拖拽對象不跑出去呢，換句話說，拖到邊緣就拖不動了，耶，是不是很多人想要實現的效果，哈哈，我們看看實現的原理是什么：
現實生活中，一個物體在一個盒子里跑不出去，是因為有堵牆，那我們只要能模擬出這堵牆，就可以把物體框起來，那這堵牆要怎么做呢？我們可以換個思路，當拖拽對象拖到邊緣的時候，比如說拖到右邊，我們將它的left固定住，是不是就不能再往右了，因為left值不能再加了，那么拖到底部，同理我們將top值固定住，就不能再往下拖了，理解嗎？
最終的結果就是如下：
//左側
if(obj.offsetLeft <=0){
obj.style.left = 0;
};
//右側
if(obj.offsetLeft >= pWidth - oWidth){
obj.style.left = pWidth - oWidth + 'px';
};
//上面
if(obj.offsetTop <= 0){
obj.style.top = 0;
};
//下面
if(obj.offsetTop >= pHeight - oHeight){
obj.style.top = pHeight - oHeight + 'px';
};
說明：pWidth,pHeight 表示父級元素的寬高（這里是表示相對於父級的寬高限制），oWidth,oHeigt表示拖拽元素的寬高
最后，我將整個拖拽代碼整理了一下：
/* 參數說明： 元素絕對定位，父級相對定位，如果父級為window，則可以不用 傳一個參數，表示父級為window，物體相對於window范圍拖動 傳2個參數，則父級為第二個參數，物體相對於父級范圍拖動 參數為id值 */ function drag(obj,parentNode){ var obj = document.getElementById(obj); if(arguments.length == 1){ var parentNode = window.self; var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight; }else{ var parentNode = document.getElementById(parentNode); var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight; } obj.onmousedown = function(ev){ var ev = ev || event; var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop; var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight; //非標准設置全局捕獲IE if(obj.setCapture){ obj.setCapture() }; document.onmousemove = function(ev){ var ev = ev || event; var L = ev.clientX - disX; var T = ev.clientY - disY; //左側 if(L <=0){ L = 0; }else if(L > pWidth - oWidth){//右側 L = pWidth - oWidth; }; //上面 if(T <= 0){ T = 0; }else if(T >= pHeight - oHeight){//下面 T = pHeight - oHeight; }; obj.style.left = L + 'px'; obj.style.top = T + 'px'; }; document.onmouseup = function(ev){ var ev = ev || event; document.onmousemove = document.onmouseup = null; //非標准釋放全局捕獲 if(obj.releaseCapture){ obj.releaseCapture() }; }; return false; //標准瀏覽器阻止瀏覽器默認行為 } }
說明：我這里處理的效果是，如果傳一個參數，表示相對的對象是window對象，如果傳2個參數，第一個是拖拽對象，第二個為相對父級
開篇就說了，搜房網的那個圖片拖拽效果是我的一個心結，我寫了一個類似的效果，供大家參考，因為自己沒有買服務器，所以效果我就不展示了，直接把代碼貼出來，供大家參考：
css：
<style>
.box{
width:600px;
height:400px;
margin:50px auto;
position:relative;
overflow:hidden;
}
#box{
width:1000px;
height:800px;
position:absolute;
left:50%;
top:50%;
margin:-400px 0 0 -500px;
}
#pic{ width:800px; height:600px; background:url(images/pic1.jpg) no-repeat; position:absolute; left:100px; top:100px; }
#pic:hover{
cursor:move;
}
</style>
html:
<div class="box">
<div id="box">
<div id="pic"></div>
</div>
</div>
javascript:
window.onload = function(){ drag("pic","box"); function drag(obj,parentNode){ var obj = document.getElementById(obj); if(arguments.length == 1){ var parentNode = window.self; var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight; }else{ var parentNode = document.getElementById(parentNode); var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight; } obj.onmousedown = function(ev){ var ev = ev || event; var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop; var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight; //非標准設置全局捕獲IE if(obj.setCapture){ obj.setCapture() }; document.onmousemove = function(ev){ var ev = ev || event; var L = ev.clientX - disX; var T = ev.clientY - disY; //左側 if(L <=0){ L = 0; }else if(L > pWidth - oWidth){//右側 L = pWidth - oWidth; }; //上面 if(T <= 0){ T = 0; }else if(T >= pHeight - oHeight){//下面 T = pHeight - oHeight; }; obj.style.left = L + 'px'; obj.style.top = T + 'px'; }; document.onmouseup = function(ev){ var ev = ev || event; document.onmousemove = document.onmouseup = null; //非標准釋放全局捕獲 if(obj.releaseCapture){ obj.releaseCapture() }; }; return false; //標准瀏覽器阻止瀏覽器默認行為 } } }
效果完全是用的那個封裝代碼塊，引用起來也挺方便，有人會問了，你這用的id獲取DOM元素，一個頁面只能用一次啊，如果頁面多次使用呢，有道理，解決方案之一，那就命名不同的id唄，又不犯法，方案二，獲取id的地方改成獲取class，但是要注意的是，getElementsByClassName是獲取的class集合，需要改寫一下，這里我就不寫了，有興趣的同學自行改寫一下，好了，到這里真的結束了！
下期預告：
突然想到了一個梗（宋丹丹老師的，寫完《月子1》就想寫《月子2》），既然知道PC怎么實現拖拽，那移動端怎么實現呢？那我就想寫完PC就想寫移動端的，那我准備准備，下期見！
哈哈，我也被雷到了，居然還搞個下期預告，純屬心血來潮，實現方法有很多，我的目的只是想幫助初學者一點參考性的指導，當然也有很多的不足之處，如果有什么更好的意見和實現的方法，請大牛們不吝指教，萬分感謝！