Jquery UI を利用した 対象との交換型並び替え

Jquery UI の　sortable()はなんかレスポンスがよくないのと、
少し調べて交換型のソートがないので、作りました。

ドロップした位置の要素をドラッグした要素のいちに移動、
つまり入替えを行うソートです。

動作

デモ

実装

html

<ul class="sortable">
    <li style="background:#e53935">Red</li>
    <li style="background:#43A047">Green</li>
    <li style="background:#1E88E5">Blue</li>
    <li style="background:#FDD835">Yellow</li>
    <li style="background:#8E24AA">Purple</li>
    <li style="background:#D84315">Orange</li>
    <li style="background:#37474F">Gray</li>
</ul>

exchangeSortable

$(function(){

    //ドラッグ中のオブジェクト情報
    var $dragObj;
    var $prevObj;
    var $dragDefPosition;
    var $revert = true;

    $('.sortable li').draggable({
        containment: 'ul.sortable',
        scroll: false,
        opacity: 0.8,
        zIndex: 10,
        revertDuration: 500,
        start: function(){
            //ドラッグ開始時に座標保存
            $dragObj = $(this);
            $dragDefPosition = $(this).position();
            $prevObj = $(this).prev();
            $revert = true;
        },
        revert: function(){
            //droppableの後に実行されるので、droppable()内でfalseにして無効化
            return $revert;
        },

    });

    $('.sortable li').droppable({
        drop: function( event, ui ){

            //ドラッグ無効
            $('.sortable li').draggable('disable');

            $revert = false;
            $dropObj = $(this);

            $dropPosition = $dropObj.position();

            $dragObj.animate({
                top: $dropPosition.top - $dragDefPosition.top,
                left: $dropPosition.left - $dragDefPosition.left,
            },'fast'
            ,function(){

                $dropObj.animate({
                    top: $dragDefPosition.top - $dropPosition.top,
                    left: $dragDefPosition.left - $dropPosition.left,
                },'200'
                ,function(){

                    //ドロップした要素の手前にドラッグ要素を移動
                    $dropObj.before($dragObj);
                    $dragObj.css({'top':0,'left':0});

                    //ドラッグ要素の元位置にドロップ要素を移動
                    if( $prevObj.length != 0){
                    $prevObj.after($dropObj);
                    }
                    else{
                        $('ul.sortable').prepend($dropObj);
                    }
                    $dropObj.css({'top':0,'left':0});


                    //ドラッグ有効
                    $('.sortable li').draggable('enable');

                });
            });
        },
    });
});

参考

jQuery UI の draggable とdropppable でドラッグ吸着