如何在SortableJS插件上自定义拖动项目时的光标

Question

我需要帮助！ ：D 我找不到如何在使用“SortableJS”插件（SortableJS）拖动时更改光标。

我使用没有反应的插件，这是表格中移动行的基本插件。

提前致谢！ ：D

Answer 1

对于那些像我一样从 G 跌落到这里的人，类似这样的事情就可以了：

var grid = document.getElementById('grid');
new Sortable(grid, {
    animation: 150,
    swap: true,
    swapThreshold: 0.65,
    ghostClass: 'dragFrom',
    swapClass: 'dragTo',
    forceFallback: true, // This is it!
    onChoose: function(e) {
        e.target.classList.add('grabbing');
    },
    onUnchoose: function(e) {
        e.target.classList.remove('grabbing');
    },
    onStart: function(e) {
        e.target.classList.add('grabbing');
    },
    onEnd: function(e) {
        e.target.classList.remove('grabbing');
    },
  onMove: function(e) {
        e.target.classList.add('grabbing');
    },
});

.grabbing * {
    cursor: grabbing !important;
}
.grid {
  margin:0;
  padding:0;
}
.grid-square {
  margin:5px;
    display: inline-block;
    background-color: #fff;
    border: solid 1px rgb(0,0,0,0.2);
    text-align: center;
    cursor: grab;
  padding-top:35px;
  width:75px;
  height:50px;
}
.grid-square:active {
    cursor: grabbing!important;/* fighting on all fronts */
}
.dragFrom{
    background-color: #48b4e6!important;
}

.dragTo {
    background-color: #30ec5f!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
 
<div id="grid">
    <div class="grid-square">1</div>
    <div class="grid-square">2</div>
    <div class="grid-square">3</div>
    <div class="grid-square">4</div>
    <div class="grid-square">5</div>
    <div class="grid-square">6</div>
</div>

forceFallback: true,

行是绕过Arthur在对问题帖子的评论中指出的问题的关键。

onChoose

、

onUnchoose

、

onStart

、

onEnd

和大多数CSS都是我经过多次测试后的肮脏解决方案。希望这对某人有帮助。

Answer 2

看起来 SortableJS 会自动将

.sortable-chosen

类添加到正在移动的项目中。

你只需要一点 CSS，就像这样：

.sortable-chosen {
    cursor: grabbing !important;
}

希望这有帮助！

Answer 3

我发现问题在于指针事件：无内联样式应用于开始拖动列表项时创建的 .sortable-drag 元素。如果用 !important 覆盖它，它实际上会禁用排序动画，并且移动的项目会直接移动到列表的末尾。我认为这就是为什么它从来没有像我们期望的那样工作