Help us understand the problem. What is going on with this article?

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 でドラッグ吸着

NickelCreate
Vue.jsが好きです! テキサスホールデムはもっと好きです!
https://nickellab.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away