可旋转元素在旋转木马内

Question

我正在使用光滑的旋转木马，并希望在幻灯片之间拖放元素。我在尝试将元素拖动到下一组幻灯片时遇到问题，当轮播动画发生时，拖动的元素与幻灯片“滑动”而不是固定在光标下。理想情况下，元素将保持固定在光标下，直到轮播动画结束，以便用户可以选择哪些新显示的幻灯片将元素放到上面，但我对任何其他可以使其更流畅的想法持开放态度。

以下是我如何触发旋转木马滑动：

$(".can-drag").sortable({
    connectWith: ".can-drag",
    containment: $(".slider"),
    sort: function(e, ui) {
      var draggedElementLeftSide = $(draggedElement).offset().left;
      var draggedElementRightSide = draggedElementLeftSide + $(draggedElement).outerWidth();

      var containerLeftSide = $('#container').offset().left;
      var containerRightSide = containerLeftSide + $('#container').outerWidth();

     if (draggedElementLeftSide <= containerLeftSide) {
         var currentSlide = $('.slider').slick('slickCurrentSlide');
         if (currentSlide >= 4) {
             $(draggedElement).draggable({
                 disabled: true
             });
          $('.slider').slick('slickSetOption', 'speed', 2000, true);
          $('.slider').slick('slickGoTo', currentSlide - 4);
         }
    } 

    else if (draggedElementRightSide >= containerRightSide) {
        $('.slider').slick('slickSetOption', 'speed', 2000, true);
        var currentSlide = $('.slider').slick('slickCurrentSlide');
        $('.slider').slick('slickGoTo', currentSlide + 4);
    }
},
});

https://jsfiddle.net/hotr8x1f/5/ - 尝试将2016年商品拖到最右边。