React：SortableJS：从排序中排除一些最后的元素

如何解决React：SortableJS：从排序中排除一些最后的元素

我在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)'
});

解决方法

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

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

  group: "name",// or { name: "...",pull: [true,false,'clone',array],put: [true,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,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,distance mouse must be from empty sortable to insert drag element into it