JQuery Sortable 获取目标项目

Question

我有一个结构如下的表：

<tbody>
<tr>
    <td>
        <button id=“elem_id”>Move</button>
    </td>
    <td>
        
    </td>
</tr>

使用此脚本：

$('tbody').sortable({
        handle: '.drag_handle',
        group: 'nested',
        animation: 600,
        ghostClass: 'drag_drop_class',
        fallbackOnBody: true,
        swapThreshold: 0.65,

        onEnd: function (evt) {

            var btn = evt.item.firstElementChild.firstElementChild;

            let id = btn.id;
            let oldIndex = evt.oldIndex;
            let newIndex = evt.newIndex;
            
            //TODO: Em vez do index da linha tenho de obter o id do destino


            let component_name = btn.getAttribute('data-component');
            // alert("[" + component_name + "] Alterou id=" + id + " da pos[" + oldIndex + "] para a pos[" + newIndex +"]");

            //TODO: Emitir um evento para o componente livewire da tabela de modo a atualizar
            Livewire.emitTo(component_name, 'reorder', id, newIndex);

        }
    });

我可以访问被拖动的元素/项目，但现在我需要被拖放到的元素/项目，我已经尝试过了很多东西，但没有任何效果。

我可以访问索引，但这对我没有帮助，因为我使用的数据表使用分页，我需要通过 id 获取项目的位置（它的属性）。


我正在处理的项目使用以下脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>

Answer 1

我发现我正在处理的项目不使用 JQuery UI。它使用 SortableJS。

我找到的与 JQuery UI 等效的代码如下：

onEnd: function (evt) {
        var current = evt.item;
        var prev = evt.item.previousElementSibling;
        var next = evt.item.nextElementSibling;
}

对于任何有同样问题的人，只需 console.log() 这个变量。

Answer 2

也许这个例子会对你有所帮助。我可以在 Sortable Jquery Ui 中找到一个 onEnd 函数。
HTML

<ul id="sortable">
  <li class="name1">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

jQuery

$( "#sortable" ).sortable({
  update: function( event, ui ) {
    var item = ui.item;
    var target_prev = ui.item.prev();
    var target_next = ui.item.next();
    console.log('item', item);
    console.log('target_prev', target_prev);
    console.log('target_next', target_next);
  }
});

只需在您的开发者工具中查看 console.log。