jQuery UI可拖动功能在Slick轮播中的应用

Question

我需要在Slick-slider中使用jQuery UI拖动元素。我知道jQuery UI有handles选项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元素之一内部时禁用Slick-slider拖动，并仍使draggable元素可拖动？

---

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

- NateW

---

有进展了吗？我也遇到了同样的问题。 - tiltos

不好意思，我还没有能够按照我想要的方式使它工作起来... :| - NateW

请检查我已添加的解决方案并且它正在运作。 - Sagar Rabadiya

@Sam，谢谢！现在看起来运行得很好！ - NateW

Answer 1

要使此方法有效，您需要像下面这样解除绑定slick slider注册的dragstart事件，然后再将draggable绑定到元素上。

$('.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/

- Sagar Rabadiya