jquery彈性雲拖動計算功能

標籤：雲主機 雲端運算 天互資料

　　jquery彈性雲拖動計算功能

　　西安天互7月份上線了自主研發的彈性雲產品，第三代雲主機全新上線，新一代儲存架構安全穩定，效能更強。

　　今天來和大家分享下jquery彈性雲拖動計算功能：首先html頁面必須有的，拖動元素、拖動範圍、背景等。

　　拖動效果分為兩種:一是根據滑鼠拖動像素的區間範圍改變拖動元素的位置，二是拖動元素隨著滑鼠所在像素的改變而同時改變。

　　一是根據滑鼠拖動像素的區間範圍改變元素的位置:擷取拖動元素對象，在他的點下元素事件(這裡注意:是點下mousedown而不是點擊click)函數中將拖動範圍距離瀏覽器左邊的位移位置。

　　例如:var pw=$(beijing).offset().left;接著嵌套一個document的mousemove移動事件，在此事件函數中擷取滑鼠的x座標即像素,此時拖動元素相對於其父元素即拖動背景範圍的橫向位移，像素為(滑鼠x座標-背景距離瀏覽器左邊距離pw)，此時需要得到相對應的資料條數 例如:1G 2G 3G 4G 5G等等，每一條對應一個區間，當滑鼠拖動到這個區間的時候，將拖動元素移入這個區間。

　　所對應的這條資料的位置 (此時拖動元素相對於背景的位移是=滑鼠位移-拖動背景位移-滑鼠相對於拖動元素的位移) 位移是橫座標之間的差值。

650) this.width=650;" border="1" src="http://www.idcs.cn/upload/20147151059103.jpg" width="554" height="53" />650) this.width=650;" border="1" src="http://www.idcs.cn/upload/20147151059587.jpg" width="554" height="47" />

　　代碼為判斷此時滑鼠像素存在於哪個區間,次數和資料條數相同，(如果覺得代碼繁多可以迴圈執行，根據迴圈次數改變對應值)區間範圍的計算是:區間像素=背景寬度像素/(資料條數-1)。第一條資料沒有左邊的部分，最後一條條資料沒有右邊的部分。所以第一條資料的範圍應該是0-區間像素/2，此時把拖動元素放在和第一條資料對應的位置(就是修改他的絕對位置的left值)，將對應資料的值傳給一個文本域，最後一條道理相同。中間的資料判斷像素區間都是:背景寬度像素/(資料條數-1)。

　　比如第二條資料的判斷區間：第一條資料區間長度至第一條資料區間長度+正常的區間長度(像素)，把拖動元素放在和此區間對應資料所在的位置，將對應資料的值傳給一個文本域，以此類推至最後一條之前。然後獨立寫一個document的mouseup事件，在事件函數中解除移動事件unbind，也可以在此做價格計算。

　　二是拖動元素隨著滑鼠所在像素的改變而同時改變：

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

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

　　文章摘自西安天互連信有限公司，如需購買彈性雲主機，請連結到我們的購買地址http://www.idcs.cn/cloud/#ywj。

　　歡迎來電諮詢!

　　銷售熱線：400-675-6239