Sortable
Sortable copied to clipboard
SortableJS
Lock an element?
Hey guys, I want to lock some elements, as in this example: http://jsfiddle.net/PQrqS/508/ Does anyone have a solution?
@elpollitodiablo @cron13 @saikiransripada It is possible currently using onMove:
Sortable.create(el, {
onMove(evt) {
if (evt.related.classList.contains('disabled')) return false;
}
});
@owen-m1 thank you, I saw that solution in #942, but that won't work because it won't let you move items up or down past disabled/locked items.
@elpollitodiablo Well if you are fine with being able to swap with the item, then why not use the filter option?
because the idea is to have an item locked in place and if you use the filter option it only prevents the item from actively be moved, but will be moved passively if another item is dragged in its place. locked should prevent even passive sorting. for example:
item 1
item 2 [locked]
item 3
item 4 [locked]
item 3 can be moved to the place of item 1, but item 2 will stay in place, so 1 and 3 only swap places without affecting 2 and 4. The solution from #942 would dissallow item 3 to be moved upward past item 2.
@elpollitodiablo I see. I remember this is what I was envisioning when I added the "feature" label. As of now I do not believe it is possible, but this is on the to do list.
Yes I imagine it's not unproblematic, but keep it in mind ;) thank you
@elpollitodiablo I see. I remember this is what I was envisioning when I added the "feature" label. As of now I do not believe it is possible, but this is on the to do list.
So, how did it go?
Hello, first of all thanks a lot for the great job on sortablejs, it works like a charm.I would also be really interested to implement the @elpollitodiablo scenario : Lock items and be able to swap nonlocked items. To illustrate a bit, a math activity I develop for learners : "Sort from smallest to highest integers 1 < 3 < 2 < 6 < 4 ". The "<" is locked but you have to swap integers to choose correct order. Thanks a lot for your help. Chris
Hey, congrats for the library, it's awesome! I also would use this 'locked item' feature if it was available. I've cloned the repo & been looking through the code to find where that should happen, but I find it pretty hard. Anyway, thanks for the amazing work.
I have found a workaround for this:
new Sortable(exampleList, {
onChoose(evt) {
if (this.el.children[evt.oldIndex].classList.contains('locked')){
this.el.children[evt.oldIndex].draggable = false;
return false;
}
}
});
Haven't done too much testing so far but it appears to work.
Hello, It could be a workaround to address that. I experiment it to authorize only two elements to be present in one container. I think that in a similar way, we could test if an element is droped on the locked item. If it happens the droped element comes back to its initial position. In terms of UX the cinematic is really explicit and the rest could be done with css to style locked elements.
Here is my code to authorize only two elements in a container :
var sortableObject = new Sortable(node, {
group: "nested",
animation: 300,
//callback function to restrict drag and drop and only admit duo association
onAdd: function(event) {
const nodeFrom = event.from; // LI origin container of p which has been dragged
const nodeDragged = event.item; // p which has been dragged
const nodeTo = event.to; // LI destination container where p has been dropped
//Test if once nodeDragged droped on the container contains two same elements (not authorised).
//Test if more than two elements in one container
//Otherwise the element can be dropped
const doubleRow1 = nodeTo.children.length == 2 && nodeTo.children[0].classList.contains("row-1") === nodeTo.children[1].classList.contains("row-1");
const doubleRow2 = nodeTo.children.length == 2 && nodeTo.children[0].classList.contains("row-2") === nodeTo.children[1].classList.contains("row-2");
if (nodeTo.children.length > 2 || doubleRow1 || doubleRow2) {
nodeFrom.appendChild(nodeDragged);
}
},
});
Hope it helps. Christophe