![](/img/trans.png)
[英]How to prevent jQuery sortable items moving from one list to another?
[英]Disable the animation of items moving when getting items from one jqueryui sortable to another
我想在每個可排序函數中都具有可排序函數。 在兩個可排序項之間,我想將可拖動項移動到占位符(即可放置項)上。 我希望它看起來好像該項目落在可放置對象上。 現在,它應該可以在其他可排序對象中進行排序。 出於這個原因,我將所有可排序對象都連接了起來,放下占位符后,我刪除了該占位符並添加了此拖動項。
但是,將某項懸停在任何其他可排序項上時,它會顯示出四處移動的項的動畫。 我不需要該動畫,因為理想情況下應該沒有可用的額外空間。 該物品只能放在可丟棄物品上。
可能嗎 ? 我該怎么辦?
謝謝
鏈接到我創建的小提琴是: http : //jsfiddle.net/ZTu24/
代碼如下:
var rearrange = function (rowSelector) {
var counter = 1;
$("#" + rowSelector).children(".innerDiv").each(function () {
$(this).children(":first").html(this.id + " " + counter++);
});
}
$(function () {
rearrange("row1");
rearrange("row2");
$(".innerDivPlaceholder").droppable({
activeClass: "droppableHighlight",
drop: function (event, ui) {
alert("Dropped !!");
var sourceRow = ui.helper.context.attributes[1].value; // to get value of token id
var destinationRow = $(this).context.attributes[1].value; // to get value of token id
sourceRow1 = new String(sourceRow);
destinationRow1 = new String(destinationRow);
//console.log(ui.helper.context);
alert("Source Row = " + sourceRow1);
alert("Destination Row = " + destinationRow1);
if (sourceRow == destinationRow) {
alert("Source equals destination");
dropCancelled = true;
return false;
} else {
$(this).remove();
}
}
});
$(".sortable").sortable({
connectWith: ".sortable",
revert: true,
cancel: ".ui-state-disabled",
//items : ".innerDiv:not(.innerDivPlaceholder)" ,
stop: function (event, ui) {
//$(".sortable").sortable( "enable" );
var targetList = $(this);
rearrange(targetList.context.id);
}
});
$(".sortable").disableSelection();
$(".sortable").on("sortreceive", function (event, ui) {
var sourceList = ui.sender;
var targetList = $(this);
alert("In sortreceive ");
//alert("Source id = " + sourceList.context.id);
//alert("Target id = " + targetList.context.id);
if ($(this).sortable('toArray').length > 3) {
$(ui.sender).sortable('cancel');
} else {
var placeHolderDiv = document.createElement('div');
placeHolderDiv.setAttribute("id", "placeholder100");
placeHolderDiv.setAttribute("tokenid", sourceList.context.id);
placeHolderDiv.setAttribute("class", "innerDivPlaceholder innerDiv ui-state-default ui-state-disabled floatLeftClass column3");
//var innerPara1 = document.createElement('p');
//innerPara1.textContent = "placeholder";
//placeHolderDiv.appendChild(innerPara1);
$(placeHolderDiv).droppable({
activeClass: "droppableHighlight",
drop: function (event, ui) {
alert("Dropped !!");
var sourceRow = ui.helper.context.attributes[1].value;
var destinationRow = $(this).context.attributes[1].value;
sourceRow1 = new String(sourceRow);
destinationRow1 = new String(destinationRow);
alert("Source Row = " + sourceRow1);
alert("Destination Row = " + destinationRow1);
if (sourceRow == destinationRow) {
alert("Source equals destination");
dropCancelled = true;
return false;
} else {
$(this).remove();
}
}
});
$(placeHolderDiv).appendTo("#" + sourceList.context.id).sortable({
connectWith: ".dottedDiv",
revert: true,
cancel: ".ui-state-disabled",
//items : ".innerDiv:not(.innerDivPlaceholder)",
stop: function (event, ui) {
//$(".sortable").sortable( "enable" );
var targetList = $(this);
rearrange(targetList.context.id);
}
}).disableSelection();
rearrange(sourceList.context.id);
rearrange(targetList.context.id);
alert("Received !!");
}
});
$(".dropDown").DropDown({
menus: [{
label: "Increase column span",
action: "new",
icon: 'print-icon'
}, {
label: "Decrease column span",
action: "save",
icon: 'print-icon' // classes: placing appropriate images at right place
}],
maxWidth: 100,
groupLabel: 'File Hello',
groupIcon: 'tick-icon',
orientation: 'horizontal'
});
});
我遇到了和你一樣的問題。 我將占位符設置為虛擬div標簽以禁用移動動畫。
$("#dragger").sortable({
connectWith: "#dropper",
placeholder: "<div></div>"
});
$("#dropper").sortable();
可能對某人有幫助,請將占位符高度設置為零以禁用移動動畫。
change: function (event, ui) {
$(ui.placeholder).height(0);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.