可在 Slick-slider 中拖动的 jQuery UI

Posted 2023-02-27

【中文标题】可在 Slick-slider 中拖动的 jQuery UI

【英文标题】：jQuery UI draggable inside Slick-slider

【发布时间】：2015-04-08 18:16:04

【问题描述】：

我需要在Slick-slider 中有一个 jQuery UI 可拖动元素。我知道 jQuery UI 有句柄选项http://jqueryui.com/draggable/#handle，但我不确定如何将它应用到 slick-slider。

我发现了这个 SO 问题：jQuery UI Slider Interference with slick carousel 但它使用的是 jQuery UI 的 slider 选项。当我在示例中执行类似操作时，我能够禁用滑动滑块拖动...但是我的可拖动元素仍然不可拖动。

JSfiddle：http://jsfiddle.net/NateW/u1burczm/

当 Slick-slider 位于我的 draggable 元素之一中并且仍然可以拖动 draggable 元素时，如何仅禁用 Slick-slider 上的拖动？

---

html：

<div class="wrapper-slider">
  <div> 
    <div id="draggable" class="ui-widget-content">
      <p>Drag me around</p>
    </div>
    <div id="draggable" class="ui-widget-content">
      <p>and me!</p>
    </div>
  </div>
  <div><h3>1</h3><h3>1</h3><h3>1</h3></div>
  <div><h3>2</h3><h3>2</h3><h3>2</h3><h3>2</h3></div>
  <div><h3>3</h3><h3>3</h3></div>
</div>

JS：

$('.wrapper-slider').slick(
  dots: false,
  infinite: false,
  centerPadding: "20px",
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
);

$(function() 
    $( ".draggable-element" ).draggable();
  );

$(".draggable-element").on("draggable mouseenter mousedown",function(event)
    event.stopPropagation();
);

【问题讨论】：

这个运气好吗？我有同样的问题

不，很遗憾，我无法按照我想要的方式进行这项工作...：|

检查下面我添加的解决方案及其工作

@Sam，谢谢！它现在似乎工作得很好！

【参考方案1】：

为此，您需要在将 Draggble 绑定到元素之前取消绑定由 slick 滑块注册的 dragstart 事件，例如跟随。

$('.wrapper-slider').slick(
  dots: false,
  infinite: false,
  centerPadding: "20px",
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
);

$(function() 
    $('*[draggable!=true]','.slick-track').unbind('dragstart');
    $( ".draggable-element" ).draggable();
  );

$(".draggable-element").on("draggable mouseenter mousedown",function(event)
    event.stopPropagation();
);

这里正在工作 jsfiddle http://jsfiddle.net/samcoolone70/u1burczm/3/