jquery SortableJS Next和Previous按钮不调用OnEnd函数

cqoc49vn  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(172)

我使用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);
});

字符串

nbnkbykc

nbnkbykc1#

如您所见,onEnd回调函数接收Event作为参数。在这种情况下,你应该自己调用onEnd,并像这样传递你在onEnd方法中使用的数据:

data = {
  oldIndex: 0, // just for example
  newIndex: 1
}

 $(this).options.onEnd(data)

字符串
;

相关问题