Posted at

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

More than 1 year has passed since last update.

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