avalon js實現拖動圖片排序

轉載請註明： TheViper http://www.cnblogs.com/TheViper  

什麼是拖動圖片排序?

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

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

下面說下要求。

1.固然首先圖片要能夠拖動。

2.圖片移出其本來的位置，拖動到目標位置而且未鬆開鼠標完成拖動前，須要在目標位置設置佔位符，讓用戶預覽拖動完成後的效果。

3.響應式。尺寸改變後，仍然能夠完成上面要求。

4.儘量兼容更多的瀏覽器。實際上，寫上一篇文章就是爲這篇作鋪墊的，因此這裏也是兼容到ie7.

最終效果

chrome

ie8

ie7

首先是拖動。

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

    <div id='wrap' ms-controller='drag_sort' class='ms-controller'>
        <ul ms-mousemove='drag_move($event)'>
            <li ms-repeat='photo_list'>
                <div ms-mousedown='start_drag($event,$index,el)'>
                    <div class="dummy"></div>
                    <p ms-attr-id='wrap_img{{$index}}'><img ms-attr-src="el.src"><i></i></p>
                </div>
            </li>
        </ul>
        <div id='drag_proxy'></div>
    </div>

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

            start_drag:function(e,i,el){
                var img=$('wrap_img'+i).firstChild,target_img_width=img.clientWidth,target_img_height=img.clientHeight;
                drag_sort.cell_size=$('wrap_img0').clientWidth;
                var xx=e.clientX-target_img_width/2,yy=e.clientY-target_img_height/2,offset=avalon($(drag_sort.container)).offset(),target=e.target.parentNode.parentNode.parentNode; 
                $('drag_proxy').style.top=yy+avalon(window).scrollTop()-offset.top+'px';
                $('drag_proxy').style.left=xx-offset.left+'px';
                $('drag_proxy').style.width=target_img_width+'px';
                $('drag_proxy').style.height=target_img_height+'px';
                if(target&&target.nodeName=='LI'){
                    ori_src=el;
                    // $('drag_proxy').innerHTML=target.querySelector('p').innerHTML;
                    $('drag_proxy').innerHTML=$('wrap_img'+i).innerHTML;
                    $('drag_proxy').style.display='block';
                    drag_sort.target_index=i;
                    drag_flag=true;
                }
                if(isIE)
                    target.setCapture();
                avalon.bind(document,'mouseup',function(){
                    up(target);
                });
                e.stopPropagation();
                e.preventDefault();
            }

注意幾點：

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事件一般都綁定在若干須要觸發元素的公共父元素上，這樣就減小了事件綁定的對象了。

具體的

            drag_move:function(e){
                if(drag_flag){
                    var xx=e.clientX,yy=e.clientY,offset=avalon($(drag_sort.container)).offset();
                    var x=xx-offset.left,y=avalon(window).scrollTop()+yy-offset.top;
                    var x_index=Math.floor(x/drag_sort.cell_size),y_index=Math.floor(y/drag_sort.cell_size),move_to=3*y_index+x_index;
                    $('drag_proxy').style.top=y-drag_sort.cell_size/2+'px';
                    $('drag_proxy').style.left=x-drag_sort.cell_size/2+'px';
                    if(move_to!=drag_sort.target_index){
                        drag_sort.photo_list.removeAt(drag_sort.target_index);
                        drag_sort.photo_list.splice(move_to,0,{src:'1.jpg'});
                        drag_sort.target_index=move_to;
                    }
                }
                e.stopPropagation();
            }

幾點說明

1.drag_flag保證必須先觸發mousedown後，才能夠觸發mousemove.

2.drag_sort.container是整個佈局的根元素，這裏是<div id='wrap'></div>.

    #wrap{
        position: relative;
        max-width: 620px;
        font-size: 0;
    }
    #drag_proxy{
        position: absolute;
        border:1px solid #009be3;
        z-index: 100;
        display: none;
    }

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

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

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

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

最後是mouseup

        function up(target){
            if(isIE)
                target.releaseCapture();
            var target_index=drag_sort.target_index;
            if(ori_src&&target_index!=-1){
                drag_sort.photo_list.splice(target_index,1);
                drag_sort.photo_list.splice(target_index,0,ori_src);
            }
            drag_holder=null;
            drag_flag=false;
            drag_sort.target_index=-1;
            $('drag_proxy').style.display='none';
            avalon.unbind(document,'mouseup');
        }

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

而後是把各變量設爲初始值。

附上下載

8.17更新

前面沒考慮到若是圖片不夠多，代理拖動到的位置可能恰好沒有圖片在那，好比，只有2張圖片

改下代理mousemove時的斷定，若是當前拖動到位置，計算出的index大於圖片的數量，就不刪除目標圖片，並把刪掉的圖片的index暫時保存到drag_sort.target_index.

if(drag_sort.photo_list.size()>move_to&&move_to!=drag_sort.target_index){
    drag_sort.photo_list.removeAt(drag_sort.target_index);
    drag_sort.photo_list.splice(move_to,0,{src:'1.jpg'});
    drag_sort.target_index=move_to;
}