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

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

所對(duì)應(yīng)的這條數(shù)據(jù)的位置 (此時(shí)拖動(dòng)元素相對(duì)于背景的位移是=鼠標(biāo)位移-拖動(dòng)背景位移-鼠標(biāo)相對(duì)于拖動(dòng)元素的位移) 位移是橫坐標(biāo)之間的差值。

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

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

當(dāng)然還有點(diǎn)擊背景讓拖動(dòng)元素改變，文本域中的數(shù)據(jù)改變，原理差別不是很大，若會(huì)以上兩步，改變點(diǎn)擊事件應(yīng)該不會(huì)太費(fèi)勁。