这是因为在重新排列每一列位置的过程中,我们只是简单地使用了jQuery的insertAfter方法来移动每一列,但没有更新每一列的索引信息。因此,在第二次拖动时,索引信息已经失效,导致拖动无效。 为了解决这个问题,我们需要在重新排列每一列位置的同时,更新每一列的索引信息。我们可以使用jQuery的each方法来遍历每一列,并更新它们的索引信息。 以下是修改后的代码,可支持多次拖动:
时间: 2024-03-05 16:52:13 浏览: 80
感谢提供更详细的信息。根据您的描述,我了解到您需要在使用jQuery的insertAfter方法移动每一列时,更新每一列的索引信息。以下是一份可能实现该功能的代码示例:
```javascript
$(function() {
var startIndex;
$(".sortable").sortable({
start: function(event, ui) {
startIndex = ui.item.index();
},
update: function(event, ui) {
var endIndex = ui.item.index();
var column = ui.item.closest('.column');
var columns = column.closest('.row').find('.column');
columns.each(function() {
var col = $(this);
var index = col.index();
col.find('.sortable li').each(function() {
var item = $(this);
var oldIndex = item.data('index');
var newIndex = oldIndex;
if (startIndex < endIndex && index === column.index()) {
if (oldIndex > startIndex && oldIndex <= endIndex) {
newIndex = oldIndex - 1;
}
} else if (startIndex > endIndex && index === column.index()) {
if (oldIndex >= endIndex && oldIndex < startIndex) {
newIndex = oldIndex + 1;
}
} else if (index < column.index()) {
newIndex = oldIndex + 1;
} else if (index > column.index()) {
newIndex = oldIndex - 1;
}
item.data('index', newIndex);
item.attr('data-index', newIndex);
});
});
}
});
});
```
这段代码使用了jQuery的sortable方法来实现拖拽排序功能,并在start和update事件中添加了对索引信息的更新。具体来说,start事件用于获取当前拖动的item的起始索引,而update事件则用于在重新排列每一列位置的同时更新每一列的索引信息。在update事件中,我们首先获取当前拖动的item的结束索引,然后遍历每一列,对每个item的索引信息进行更新。
更新索引信息的逻辑比较复杂,但可以总结为以下几个步骤:
1. 遍历每一列,并遍历每个item;
2. 获取当前item的原始索引(即拖拽前的索引);
3. 根据拖拽前后的位置关系,更新item的新索引;
4. 更新item的data-index属性和索引值。
需要注意的是,以上代码仅供参考,具体实现可能因具体情况而异,您需要根据自己的需求进行相应调整和修改。