jquery彈性雲拖動計算功能
今天來和大家分享下jquery彈性雲拖動計算功能：首先html頁面必須有的，拖動元素、拖動範圍、背景等。
拖動效果分為兩種:一是根據滑鼠拖動像素的區間範圍改變拖動元素的位置，二是拖動元素随着滑鼠所在像素的改變而同時改變。
一是根據滑鼠拖動像素的區間範圍改變元素的位置:擷取拖動元素對象，在他的點下元素事件(這裡注意:是點下mousedown而不是點選click)函數中将拖動範圍距離浏覽器左邊的偏移位置。
例如:var pw=$(beijing).offset().left;接着嵌套一個document的mousemove移動事件，在此事件函數中擷取滑鼠的x坐标即像素,此時拖動元素相對于其父元素即拖動背景範圍的橫向偏移，像素為(滑鼠x坐标-背景距離浏覽器左邊距離pw)，此時需要得到相對應的資料條數 例如:1G 2G 3G 4G 5G等等，每一條對應一個區間，當滑鼠拖動到這個區間的時候，将拖動元素移入這個區間。
所對應的這條資料的位置 (此時拖動元素相對于背景的位移是=滑鼠位移-拖動背景位移-滑鼠相對于拖動元素的位移) 位移是橫坐标之間的內插補點。
代碼為判斷此時滑鼠像素存在于哪個區間,次數和資料條數相同，(如果覺得代碼繁多可以循環執行，根據循環次數改變對應值)區間範圍的計算是:區間像素=背景寬度像素/(資料條數-1)。第一條資料沒有左邊的部分，最後一條條資料沒有右邊的部分。是以第一條資料的範圍應該是0-區間像素/2，此時把拖動元素放在和第一條資料對應的位置(就是修改他的絕對定位的left值)，将對應資料的值傳給一個文本域，最後一條道理相同。中間的資料判斷像素區間都是:背景寬度像素/(資料條數-1)。
比如第二條資料的判斷區間：第一條資料區間長度至第一條資料區間長度+正常的區間長度(像素)，把拖動元素放在和此區間對應資料所在的位置，将對應資料的值傳給一個文本域，以此類推至最後一條之前。然後獨立寫一個document的mouseup事件，在事件函數中解除移動事件unbind，也可以在此做價格計算。
二是拖動元素随着滑鼠所在像素的改變而同時改變：
這個就等于用滑鼠拖動圖檔一樣，網上有很多的教程，隻不過隻有橫向拖動，和第一種方式差别少了判斷多了比例的計算，隻是要計算拖動多少像素應該對應的資料數是多少，這有一個比率的計算。就是總共有多少條資料，比如1到100兆，每兆都可以選擇到，就有一百條資料。比率=總資料條數/(拖動範圍寬度-拖動元素的寬度)。在滑鼠拖動的拖動事件中将(拖動元素的中間位置的坐标相對于拖動背景的坐标計算出來乘以比率)就是拖動元素目前所在位置對應的資料數，将他寫入文本域。
當然還有點選背景讓拖動元素改變，文本域中的資料改變，原理差别不是很大，若會以上兩步，改變點選事件應該不會太費勁。
文章來源于西安天互資料。