javascript - react : SortableJS: Exclude some last elements from sorting

Question

我在 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>

我正在使用 sortablejs npm 库进行排序。

现在，我想从排序中排除最后 2 个元素，

下面是我用来排序的函数

    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();
            }
        }
    });

预期结果:最后 2 个项目应该变成不可拖动的

此外，前 3 个项目不应该低于它们

我怎样才能做到这一点？

类似问题的解决方案在: How to exclude an element from being dragged in sortable list?

我想要在 React 中等效于下面提到的代码:

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

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

Answer 1

也许您可以使用“过滤器”配置选项？

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