Jquery 旋转木马内的可拖动元件

我正在使用slick carousel，希望使元素在幻灯片之间可以拖放。当尝试将元素拖动到下一组幻灯片时，我遇到了一个问题，当旋转木马动画出现时，被拖动的元素将与旋转木马一起“滑动”，而不是固定在光标下。理想情况下，元素将保持固定在光标下，直到旋转木马动画完成，以便用户可以选择将元素放置在新可见的幻灯片中的哪个幻灯片上，但我愿意接受任何其他使其更流畅的想法

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

$(".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);
    }
},
});

$（“.can drag”）。可排序({
连接：“.可以拖动”，
包含：$（“.slider”），
排序：函数（e、ui）{
var draggedElementLeftSide=$（draggedElement.offset（）.left；
var draggedElementRightSide=draggedElementLeftSide+$（draggedElement.outerWidth（）；
var containerLeftSide=$（'#container'）.offset（）.left；
var containerRightSide=containerLeftSide+$（“#container”）.outerWidth（）；
如果（draggedElementLeftSide=4）{
$（拖动删除）。可拖动({
残疾人士：对
});
$（'.slider'）.slick（'slickSetOption'，'speed'，2000，true）；
$（'.slider'）.slick（'slickGoTo'，currentSlide-4）；
}
} 
else if（draggedElementRightSide>=容器右侧）{
$（'.slider'）.slick（'slickSetOption'，'speed'，2000，true）；
var currentSlide=$（'.slider'）.slick（'slickCurrentSlide'）；
$（'.slider'）.slick（'slickGoTo'，currentSlide+4）；
}
},
});

---

-尝试将2016项目拖到最右侧。

我确实注意到您的代码中存在一些异常，例如多个

var currentsiled

声明（为什么不在

if

？和

$（draggedElement）之前只声明一个呢）

当它已经是一个jQuery对象，因此只要

draggedElement

就足够了。我不太熟悉

slick

，因此无法确定您想要的更改。我有时不会“拖动”元素一旦被删除，将失去保持可拖动功能的能力，这不是一致的，而是周期性的情况。在拖动元素时会重复调用sort函数，因此我认为在旋转木马实际移动幻灯片集之前不确定当前幻灯片会节省一些开销。至于$（draggedElement），我想这是个坏习惯。我想知道您是否可以使用

start:function（e，ui）{console.log（'start'）；}，stop:function（e，ui）{console.log（'stop'）；}，

而不是

排序：

这里是为了更好的效果？只是一个想法。或者可能是所有三个。我确实注意到您的代码中有一些异常，例如多个

var currentSlide

声明（为什么不在

if

之前加一个声明以及

$（draggedElement）

当它已经是一个jQuery对象，因此只要

draggedElement

就足够了。我不太熟悉

slick

，因此无法确定您想要的更改。我有时不会“拖动”元素一旦被删除，将失去保持可拖动功能的能力，这不是一致的，而是周期性的情况。在拖动元素时会重复调用sort函数，因此我认为在旋转木马实际移动幻灯片集之前不确定当前幻灯片会节省一些开销。至于$（draggedElement），我想这是个坏习惯。我想知道你是否可以使用

start:function（e，ui）{console.log（'start'）；}，stop:function（e，ui）{console.log（'stop'）；}，

而不是

sort:

来获得更好的效果？这只是一个想法。或者这三个都是。