我已经使 jQuery 可排序和可放置以一起工作。然而我几乎做到了这一点。排序只有一个问题。
问题：
当我在 RHS（右侧）中拖放 2 个项目并且我将第一个项目排序在第二个下方时，第二个项目的位置会移动到上一步。例如，如果我有 2 件物品。第 2 和第 4 的位置，当我将第 2 定位的项目排序到低于 4 时，第 4 项目移动到第 3 位置，这是我不想要的。我尽力修复它，但我无法解决，我最终知道这是我不想要的默认功能。
我希望当我对一个项目的位置进行排序时，另一个项目不会向上移动一步。
运行代码：http: //jsfiddle.net/gbg8R/
<script>
$(function () {
// create unique IDs
function rankOrder(){
var index = 1;
$(".rank-order-controller").each(function () {
var itemID = $(this).attr("id", "rank-order-" + index++);
var getID = "#" + $(this).attr("id");
var minRankSelection = $(getID+" .minRankSelectionInput").val(); // need to call dynamic input value from the planner side option "Rank how many choices?"
var allChoices = $(getID+ " .drag-container ul.items li").length;
// if rank number is not defined
if (minRankSelection == ''){
minRankSelection = allChoices;
}
// create dynamic dom element for rank items
for (var i=1; i <= minRankSelection; i++){
$("<li>" + i +"</li>").appendTo($(getID+" .sort-container ul.rank"));
$("<li><div class='item disable'>DRAG CHOICES HERE</div><input type='text' value='' class='value' style='display:none' /><span class='delete'></span> <span class='move-cursor'></span></li>").appendTo($(getID+" .sort-container ul.items"));
}
//set default height of left column
var itemHeight = $(getID+" .drag-container ul").height($(getID+" .sort-container ul").height()-2); // $(getID+" .drag-container").height($(getID+" .sort-container ul").height()-2);
// var itemHeight = $(getID+" .drag-container").height($(getID+" .sort-container ul").height()-2); $(getID+" .drag-container ul").height($(getID+" .drag-container ul").height()-2);
// if rank number of item is equal to rank number of choices
if(allChoices == minRankSelection){
$(getID+ " .drag-container").css("overflow-y","visible");
}else{
$(getID+ " .drag-container").css("overflow-y","scroll");
}
//invoke all functions
BindDraggable(getID, "ul.items li");
BindDroppableSortable(getID, ".sort-container ul.items li");
BindDroppable(getID, ".drag-container ul.items");
deleteItems(getID, ".sort-container ul.items");
});
}
rankOrder();
// make items draggable
function BindDraggable($ID, selector) {
$(selector, $ID).each(function () {
var CurrentSelector = $(this);
CurrentSelector.find("div:not(.disable)").draggable({
helper: "clone",
revert: 'invalid',
handle: "div",
zIndex: 100,
disabled: false,
containment: $ID,
start: function (event, ui) {
$(this).addClass("hidden");
CurrentSelector.find("span").addClass("hidden");
},
stop: function () {
$(this).removeClass("hidden");
CurrentSelector.find("span").removeClass("hidden");
}
});
});
}
// make right col items droppable and bind with sortable
function BindDroppableSortable($ID, selector) {
$(selector, $ID).each(function () {
var CurrentSelector = $(this);
CurrentSelector.find("div").droppable({
activeClass: "ui-state-active",
hoverClass: "ui-state-hover",
accept: $ID + " .drag-container div",
drop: function (event, ui) {
var $this = $(this);
$this.droppable('disable').removeClass().addClass("item");
BindDraggable($ID, ".sort-container ul.items li"); // recall func
CurrentSelector.addClass("ui-state-default").find(".move-cursor").css('display', 'block');
$this.text(ui.draggable.text()); // update the text
var $deleteLI = $(ui.draggable).parent();
$this.html($(ui.draggable).remove().html());
$deleteLI.remove(); // remove Left Col <li>
$(selector, $ID).find("div").removeClass("ui-state-active");
var indexVal = CurrentSelector.index();
$(CurrentSelector).find("input.value").val(indexVal).attr("value", indexVal + $this.text());
}
}).closest("ul.items").sortable({
//items:".ui-state-default",
cursor: "move",
handle: ".move-cursor",
revert: true,
containment: "parent",
//helper: "clone",
placeholder: "placeholder",
tolerance: "pointer",
stop: function(event, ui){
//var indexVal = ui.item.index();
$(ui.item).find("input.value").val(ui.item.index()).attr('value', ui.item.index() + ui.item.text());
}
}).disableSelection();
});
}
// make left col items droppable
function BindDroppable($ID, selector) {
$(selector, $ID).droppable({
activeClass: "ui-state-active",
hoverClass: "ui-state-hover",
accept: $ID + " .sort-container div",
drop: function (event, ui) {
var newItem = $('<li/>');
$('<div/>', {
"class":"item",
text: ui.draggable.text()
}).appendTo(newItem);
newItem.appendTo($(this));
BindDraggable($ID, ".drag-container li"); // recall func
$(ui.draggable).text("DRAG CHOICES HERE").removeClass("ui-state-active").addClass("disable").draggable("disable").droppable("enable");
$(ui.draggable).closest("li").removeAttr("class").find("span").css("display", "none")
}
})
}
// make right items deletable
function deleteItems($ID, selector) {
$(selector, $ID).on("mouseenter", ".ui-state-default", function (event) {
var CurrentSelector = $(this);
CurrentSelector.find("div").addClass("ui-state-active").end().find("span.delete").css('display', 'block').click(function (event) {
if($(this).parent('li.ui-state-default').find("div").length == 0) return;
var newItem = $('<li/>');
$('<div/>', {
"class":"item",
text: CurrentSelector.find("div").text()
}).appendTo(newItem);
newItem.appendTo($ID + " .drag-container ul.items"); // new items
CurrentSelector.removeAttr("class").find("div").removeClass("ui-state-active").addClass("disable").text("DRAG CHOICES HERE").droppable("option","disabled", false).draggable("disable");
CurrentSelector.find("span").css('display', 'none');
BindDraggable($ID, ".drag-container li"); // recall func
});
});
$(selector, $ID).on("mouseleave", ".ui-state-default", function (event) {
$(this).find("div").removeClass("ui-state-active").end().find("span.delete").css('display', 'none');
});
}
}); // anonymous function end
</script>