javascript - JQuery Sortable 获取目标项目
问题描述
我有一个具有以下结构的表:
<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>
解决方案
也许这个例子会对你有所帮助。我可以在 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。
推荐阅读
- redis - 为什么在将 Jedis 与 Spring Data @RedisHash 注释一起使用时,数据在 Redis 中以 SET 类型存储?
- php - 从 url 中删除 .php 扩展名。但在最后一个值之前
- javascript - 如何在实时数据库中查询表中的所有对象
- android - 两个使用 XML 的具有动态宽度的第一个 TextView 的水平 TextView
- vbscript - 如何获取要检测的请求
- c++ - 是否可以根据范围改变函数的行为?
- sql - 如何在 SQL 中分配百分比?
- android - 如何使用api通过http get请求访问Firebase数据库数据
- ansible - 未在 group_vars 中评估的 Ansible 主机变量
- php - Laravel - 归档数据,删除和插入另一个表