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

Question

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

4

我在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个项目不应该能够移动到它们下面。

如何实现？

类似问题的解决方案在以下链接中查看：如何在可排序列表中排除某个元素不可拖动？

我想在React中获得下面所提到代码的等效版本：

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

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

- Keval Bhogayata

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jpcoseani · Accepted Answer

也许您可以使用“filter”配置选项？

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