可排序 - 動畫恢復未接受的專案
工作示例: https : //jsfiddle.net/Twisty/4f5yh3pa/7/
取消和還原可排序的檔案沒有詳細記錄。幫助顯示如何有條件地取消如何將專案從一個列表移動到另一個列表。預設情況下,這不是可排序的動畫,此示例包含動畫。
結果:列表#2 僅接受具有 acceptable
類的專案。這兩個列表都可以自然地進行排序。
HTML
<div class="ui-widget">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default acceptable">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default acceptable">Item 7</li>
</ul>
</div>
CSS
.ui-widget {
position: relative;
}
.connectedSortable {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 {
background: #fff;
}
#sortable2 {
background: #999;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
JavaScript
$(function() {
$(".connectedSortable").sortable({
connectWith: ".connectedSortable",
receive: function(e, ui) {
var $self = $(this);
var $item = ui.item;
var $sender = ui.sender;
// Restrict condition to only one specific list if desired
if ($(e.target).attr("id") == "sortable2") {
if ($item.hasClass("acceptable")) {
// Item Accepted
console.log($self.attr("id") + " accepted item from: #" + $sender.attr("id") + " > " + $item.text());
} else {
// Item Rejected
console.log($self.attr("id") + " rejected item from: #" + $sender.attr("id") + " > " + $item.text());
// Animate the return of the items position
$item.css("position", "absolute").animate(ui.originalPosition, "slow", function() {
// Return the items position control to it's parent
$item.css("position", "inherit");
// Cancel the sortable action to return it to it's origin
$sender.sortable("cancel");
});
}
}
}
}).disableSelection();
});