研究的重點在於利用拖曳的功能作出圖片的排序
使用draggable來使DOM物件能夠被拖曳
使用droppable來讓DOM物件作為容器
HTML當中以block為容器而img為拖曳物件
先來看一下HTML有哪些目標容器與拖曳物件
第一個要注意的地方在於：如何得知drag物件是從哪個block拖曳到另一個block
我是採用drop的事件out與drop來判斷
但要特別注意out event如果拖曳有經過別的容器也會觸發
所以增加一個變數flag來判斷第一次out event的source block
第二個要注意的地方在於：要特別注意事件被觸發的順序
若事件為draggable start與stop以及droppable out與drop
根據我的理解，觸發順序為start→out→drop→stop
另外特別注意droppable事件over與out，我發現在預設的情況下
有可能只觸發over事件，而尚未觸發out事件
因為沒注意到此情況，導致某些情況下拖曳效果會失敗，產生嚴重瑕疵，不可不慎
第三個要注意的地方在於：因為我是用append來使拖曳物件移動到目標容器
但這樣產生的問題是，會被判斷成拖曳失敗而發生revert動畫
後來發現原因是append使拖曳物件到達目標容器後位移效果並沒有消失
可以用css( 'left', '0' )來取消位移
這樣就可以防止拖曳失敗而產生revert動畫
以上三點我覺得最為重要！
下面提幾個小細節的地方：
$(".line")用來顯示定位線，而且要判斷drag物件的out與drop block是左移還右移
為了維持定位線跑的感覺，當觸發over event處理定位線位置
$(".line").addClass('line_clear');先清除定位線再重新繪製
例如：block4→block1,那輔助線就要在block左邊；
反之，則要在block右邊
若要使拖曳物件永遠在top
我的作法是觸發start事件時將拖曳物件的zIndex升高
stop事件則將拖曳物件的zIndex歸零
沒有留言:
張貼留言