我使用SortableJS库(SortableJS/Sortable)来重新排序图片。我把按钮:每张图片上的“下一个”和“上一个”,以便于在桌面模式下移动。
按钮工作得很好,但问题是SortableJS:OnEnd函数(管理索引的处理:oldIndex和newIndex)。
我怎样才能使我的按钮工作,以便sortableJS可以获得新的索引来组织照片?
这是我的代码
<div class="pictures">
<div class="picture-item">
<img src="...mypicture.jpg...">
<div class="btn-nav">
<button type="button" class="sort-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="arrow-left-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</button>
<button type="button" class="sort-next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</button>
</div>
</div>
...
</div>
// Array populated from dropzoneJS upload
var pictures = [{filename:test.jpg, position:0},{filename:test2.jpg, position:1}, ...]
var sortable = new Sortable(document.getElementById('pictures'), {
onEnd:function(evt)
{
// Function work with drag and drop not button click !
console.log(pictures);
let oldIndex = evt.oldIndex,
newIndex = evt.newIndex;
pictures.splice(newIndex, 0, pictures.splice(oldIndex, 1)[0]);
pictures.forEach((picture, index) => picture.position = index);
updateHiddenField(pictures);
}
});
$(document).on('click', '.sort-prev', function(){
var current = $(this).closest('.picture-item');
current.prev().before(current);
});
$(document).on('click', '.sort-next', function(){
var current = $(this).closest('.picture-item');
current.next().after(current);
});
字符串
1条答案
按热度按时间nbnkbykc1#
如您所见,
onEnd
回调函数接收Event作为参数。在这种情况下,你应该自己调用onEnd
,并像这样传递你在onEnd
方法中使用的数据:字符串
;