frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

support constrained items in editable list

Browse Source
This commit is contained in:
Steve-Mcl 2024-03-01 11:08:50 +00:00
parent db249356e6
commit 0cdb36f73d
1 changed files with 38 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js vendored
View File

@ -174,12 +174,24 @@
this.uiContainer.width(m[1]); this.uiContainer.width(m[1]);
} }
if (this.options.sortable) { if (this.options.sortable) {
var isCanceled = false; // Flag to track if an item has been canceled from being dropped into a different list
var noDrop = false; // Flag to track if an item is being dragged into a different list
var handle = (typeof this.options.sortable === 'string')? var handle = (typeof this.options.sortable === 'string')?
this.options.sortable : this.options.sortable :
".red-ui-editableList-item-handle"; ".red-ui-editableList-item-handle";
var sortOptions = { var sortOptions = {
axis: "y", axis: "y",
update: function( event, ui ) { update: function( event, ui ) {
// dont trigger update if the item is being canceled
const targetList = $(event.target);
const draggedItem = ui.item;
const draggedItemParent = draggedItem.parent();
if (!targetList.is(draggedItemParent) && draggedItem.hasClass("red-ui-editabelList-item-constrained")) {
noDrop = true;
}
if (isCanceled || noDrop) {
return;
}
if (that.options.sortItems) { if (that.options.sortItems) {
that.options.sortItems(that.items()); that.options.sortItems(that.items());
} }
@ -189,8 +201,32 @@
tolerance: "pointer", tolerance: "pointer",
forcePlaceholderSize:true, forcePlaceholderSize:true,
placeholder: "red-ui-editabelList-item-placeholder", placeholder: "red-ui-editabelList-item-placeholder",
start: function(e, ui){ start: function (event, ui) {
ui.placeholder.height(ui.item.height()-4); isCanceled = false;
ui.placeholder.height(ui.item.height() - 4);
ui.item.css('cursor', 'grabbing'); // TODO: this doesn't seem to work, use a class instead?
},
stop: function (event, ui) {
ui.item.css('cursor', 'auto');
},
receive: function (event, ui) {
if (ui.item.hasClass("red-ui-editabelList-item-constrained")) {
isCanceled = true;
$(ui.sender).sortable('cancel');
}
},
over: function (event, ui) {
// if the dragged item is constrained, prevent it from being dropped into a different list
const targetList = $(event.target);
const draggedItem = ui.item;
const draggedItemParent = draggedItem.parent();
if (!targetList.is(draggedItemParent) && draggedItem.hasClass("red-ui-editabelList-item-constrained")) {
noDrop = true;
draggedItem.css('cursor', 'no-drop'); // TODO: this doesn't seem to work, use a class instead?
} else {
noDrop = false;
draggedItem.css('cursor', 'grabbing'); // TODO: this doesn't seem to work, use a class instead?
}
} }
}; };
if (this.options.connectWith) { if (this.options.connectWith) {