在Slick-slider中可以拖动jQuery UI [英] jQuery UI draggable inside Slick-slider

问题描述

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

I need to have a jQuery UI draggable element inside a Slick-slider. I know that jQuery UI has the handles option http://jqueryui.com/draggable/#handle but I'm not sure how to apply this to the slick-slider.

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

I found this SO question: jQuery UI Slider Interference with slick carousel but it's using jQuery UI's slider option. When I did something similar on my example I was able to disable the slick-slider dragging... But my draggable elements still aren't draggable.

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

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

如果在我的可拖动元素中的某个滑块中，我如何禁用滑动滑块 并仍然具有 draggable 元素可拖动？

How do I disable dragging on the Slick-slider only when it's inside one of my draggable elements and still have the draggable elements 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();
});

推荐答案

为了解决这个问题，你需要取消绑定dragstart事件通过光滑滑块注册，如在将draggble绑定到元素之前跟随

for that to work you need to unbind the dragstart event registered by slick slider like follow before binding the draggble to element

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

here is working jsfiddle http://jsfiddle.net/samcoolone70/u1burczm/3/

这篇关于在Slick-slider中可以拖动jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！