Tuesday 17 November 2020

React : SortableJS: Exclude some last elements from sorting

I have a list something similar to this in React

    <div id="list">
        <Item data-id="1">
        <Item data-id="2">
        <Item data-id="3">
        <Item data-id="4">
        <Item data-id="5">
    </div>

I am using sortablejs npm library for sorting.

Now, I want to exclude the last 2 elements from sorting,

Below is the function I use for sorting

    import Sortable from 'sortablejs';
    let list = document.getElementById('list');
    Sortable.create(list, {
        ghostClass: 'ghost',
        store : {
            set: (sortable) => {
                // logic to store new order in DB
                sortable.destroy();
            }
        }
    });

Expected Result: Last 2 items should become non-draggable

also, first 3 items should not be able to go below them

How can I achieve that?

Solution for a similar problem is at: How to exclude an element from being dragged in sortable list?

I want equivalent of below mentioned code in React:

$(function() {
    $('.sortable').sortable();
    $('.sortable').disableSelection();
    $('.sortable').sortable({ cancel: '.note' });
});​

$('.sortable').sortable({
    items : ':not(.note)'
});


from React : SortableJS: Exclude some last elements from sorting

No comments:

Post a Comment