avalonjs實現仿微博拖動圖片排序_javascript技巧

點擊此處進入源碼下載

什么是拖動圖片排序?

就像微博這種，上傳后允許用戶通過拖動圖片，調整幾張圖片的順序。

可以看到微博在這里把每張圖片固定了尺寸，稍微嚴謹點的話，就需要像上一篇文章那樣，外面是響應式的等高等寬的若干div容器，里面則是等比例縮放的響應式圖片。

下面說下要求。

1.當然首先圖片要可以拖動。

2.圖片移出其原本的位置，拖動到目標位置并且未松開鼠標完成拖動前，需要在目標位置設置占位符，讓用戶預覽拖動完成后的效果。

3.響應式。尺寸改變后，仍然可以完成上面要求。

4.盡可能兼容更多的瀏覽器。實際上，寫上一篇文章就是為這篇做鋪墊的，所以這里也是兼容到ie7.

最終效果

chrome

ie8

ie7

首先是拖動。

這里用的代理，即在原本的布局中多了個div,實際拖動的對象就是這個div.具體的，

對每個單元格綁定mousedown,觸發start_drag時，把單元格里的img放到代理里面，同時獲取圖片的大小，記下當前鼠標點擊的位置，并以點擊位置為代理div矩形（圖片）的中心點，顯示代理，隱藏點擊的圖片。

注意幾點：

1.drag_sort.cell_size記錄當前單元格的尺寸，這里寬高比是1:1,因為布局是響應式，所以需要記錄。后面可以看到這個怎么用。

2.事件的target需要判斷是不是img標簽觸發的，因為有可能點擊位置是單元格與圖片間的空白區域。

3.ori_src用來保存當前單元格的圖片，因為后面mousemove的時候會刪除圖片原本位置的單元格。

4.drag_sort.target_index記錄當前單元格的index,后面會比較這個index和代理移動到的單元格的index.

5.drag_flag表示是否可以mousemove了。

6.對于ie,必須target.setCapture();，否則

可以看到拖動的時候會執行瀏覽器的默認行為。

7.event.preventDefault();也必須加上，否則也會出現瀏覽器的默認行為，比如firefox拖動圖片時，會打開新標簽頁，顯示圖片。

然后是mousemove,這里綁定在ul標簽上。像mousemove,mouseup事件通常都綁定在若干需要觸發元素的公共父元素上，這樣就減少了事件綁定的對象了。

具體的

幾點說明

1.drag_flag保證必須先觸發mousedown后，才可以觸發mousemove.

2.drag_sort.container是整個布局的根元素，這里是.

后面計算的時候要把根元素的left,top減掉。

3.計算時avalon(window).scrollTop()瀏覽器的豎直滾動條也要考慮。

4.每個單元格的尺寸始終是一樣的，所以直接光標移動到的位置除以行數，列數，取整，得到目標單元格的index.

5.move_to!=drag_sort.target_index當前光標移到的單元格不是圖片原本所在的單元格，刪除圖片原本位置的單元格，在目標單元格插入占位的單元格，這時拖動的圖片還沒放進目標單元格，最后更新初始單元格的index.

最后是mouseup

判斷ori_src&&target_index!=-1目的在于排除在非綁定對象上mouseup這種無效操作。因為是在document上綁定mouseup,就要排除類似于隨便在空白處點擊這種情況。這時不能對單元格刪除，插入。

然后是把各變量設為初始值。

圖片效果：

HTML代碼:

JS代碼:

以上代碼實現了avalon js仿微博拖動圖片排序的功能，本文寫的不好還請見諒。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com