天互數(shù)據(jù)7月份上線了自主研發(fā)的彈性云產(chǎn)品，第三代云主機全新上線，新一代存儲架構(gòu)安全穩(wěn)定，性能更強。

今天來和大家分享下jquery彈性云拖動計算功能：首先html頁面必須有的，拖動元素、拖動范圍、背景等。
    拖動效果分為兩種:一是根據(jù)鼠標拖動像素的區(qū)間范圍改變拖動元素的位置，二是拖動元素隨著鼠標所在像素的改變而同時改變。
    一是根據(jù)鼠標拖動像素的區(qū)間范圍改變元素的位置:獲取拖動元素對象，在他的點下元素事件(這里注意:是點下mousedown而不是點擊click)函數(shù)中將拖動范圍距離瀏覽器左邊的偏移位置。
    例如:var pw=$(beijing).offset().left;接著嵌套一個document的mousemove移動事件，在此事件函數(shù)中獲取鼠標的x坐標即像素,此時拖動元素相對于其父元素即拖動背景范圍的橫向偏移，像素為(鼠標x坐標-背景距離瀏覽器左邊距離pw)，此時需要得到相對應的數(shù)據(jù)條數(shù) 例如:1G 2G 3G 4G 5G等等，每一條對應一個區(qū)間，當鼠標拖動到這個區(qū)間的時候，將拖動元素移入這個區(qū)間。

所對應的這條數(shù)據(jù)的位置 (此時拖動元素相對于背景的位移是=鼠標位移-拖動背景位移-鼠標相對于拖動元素的位移) 位移是橫坐標之間的差值。

    代碼為判斷此時鼠標像素存在于哪個區(qū)間,次數(shù)和數(shù)據(jù)條數(shù)相同，(如果覺得代碼繁多可以循環(huán)執(zhí)行，根據(jù)循環(huán)次數(shù)改變對應值)區(qū)間范圍的計算是:區(qū)間像素=背景寬度像素/(數(shù)據(jù)條數(shù)-1)。第一條數(shù)據(jù)沒有左邊的部分，最后一條條數(shù)據(jù)沒有右邊的部分。所以第一條數(shù)據(jù)的范圍應該是0-區(qū)間像素/2，此時把拖動元素放在和第一條數(shù)據(jù)對應的位置(就是修改他的絕對定位的left值)，將對應數(shù)據(jù)的值傳給一個文本域，最后一條道理相同。中間的數(shù)據(jù)判斷像素區(qū)間都是:背景寬度像素/(數(shù)據(jù)條數(shù)-1)。
    比如第二條數(shù)據(jù)的判斷區(qū)間：第一條數(shù)據(jù)區(qū)間長度至第一條數(shù)據(jù)區(qū)間長度+正常的區(qū)間長度(像素)，把拖動元素放在和此區(qū)間對應數(shù)據(jù)所在的位置，將對應數(shù)據(jù)的值傳給一個文本域，以此類推至最后一條之前。然后獨立寫一個document的mouseup事件，在事件函數(shù)中解除移動事件unbind，也可以在此做價格計算。
    二是拖動元素隨著鼠標所在像素的改變而同時改變：

這個就等于用鼠標拖動圖片一樣，網(wǎng)上有很多的教程，只不過只有橫向拖動，和第一種方式差別少了判斷多了比例的計算，只是要計算拖動多少像素應該對應的數(shù)據(jù)數(shù)是多少，這有一個比率的計算。就是總共有多少條數(shù)據(jù)，比如1到100兆，每兆都可以選擇到，就有一百條數(shù)據(jù)。比率=總數(shù)據(jù)條數(shù)/(拖動范圍寬度-拖動元素的寬度)。在鼠標拖動的拖動事件中將(拖動元素的中間位置的坐標相對于拖動背景的坐標計算出來乘以比率)就是拖動元素目前所在位置對應的數(shù)據(jù)數(shù)，將他寫入文本域。

當然還有點擊背景讓拖動元素改變，文本域中的數(shù)據(jù)改變，原理差別不是很大，若會以上兩步，改變點擊事件應該不會太費勁。