4

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)'
});
Kelum Sampath Edirisinghe
  • 1,156
  • 12
  • 21
Keval Bhogayata
  • 4,422
  • 3
  • 13
  • 36

1 Answers1

3

maybe you can use the "filter" config option?

var sortable = new Sortable(el, {
  // variables

  group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
  sort: true, // sorting inside list
  delay: 0, // time in milliseconds to define when the sorting should start
  delayOnTouchOnly: false, // only delay if user is using touch
  touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
  disabled: false, // Disables the sortable if set to true.
  store: null, // @see Store
  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
  handle: ".my-handle", // Drag handle selector within list items
  filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
  preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
  draggable: ".item", // Specifies which items inside the element should be draggable

  dataIdAttr: "data-id",

  ghostClass: "sortable-ghost", // Class name for the drop placeholder
  chosenClass: "sortable-chosen", // Class name for the chosen item
  dragClass: "sortable-drag", // Class name for the dragging item

  swapThreshold: 1, // Threshold of the swap zone
  invertSwap: false, // Will always use inverted swap zone if set to true
  invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
  direction: "horizontal", // Direction of Sortable (will be detected automatically if not given)

  forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

  fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
  fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
  fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

  dragoverBubble: false,
  removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
  emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it
jpcoseani
  • 169
  • 2