在Slick-slider中可以拖动jQuery UI

Question

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

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

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

如果只在它的一个draggable元素内部仍然draggable拖动的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();
});

Answer 1

要使其工作，您需要取消绑定由光滑滑块注册的dragstart事件，如下所示，然后将draggble绑定到元素

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