[英]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.