javascript - jQuery UI 可在 Slick-slider 内拖动

Question

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

我发现了这个 SO 问题:jQuery UI Slider Interference with slick carousel但它使用 jQuery UI 的 slider 选项。当我在我的例子中做了类似的事情时，我能够禁用 slick-slider 拖动...但是我的可拖动元素仍然不可拖动。

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

当 Slick-slider 位于我的 draggable 元素之一内并且 draggable 元素仍然可拖动时，如何禁用对 Slick-slider 的拖动 only ？

---

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();
});

Answer 1

为此，您需要在将 draggble 绑定(bind)到元素之前取消绑定(bind)由 slick slider 注册的 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/