JQuery UI drag and drop inside Slick-slider

I need a jQuery UI draggable element inside a Slick-slider . I know that the jQuery user interface has a handles parameter http://jqueryui.com/draggable/#handle , but I'm not sure how to apply it to the slider.

I found this SO question: jQuery UI Slider Interference with a smooth carousel , but it uses the jQuery UI option slider. When I did something similar in my example, I was able to turn off the drag and drop of the slider-slider ... But my draggable items are still not being dragged.

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

How do I disable the drag and drop of the Slick slider only if it is inside one of my elements draggableand still has elements draggablethat can be dragged?


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();
});
+4
source share
1 answer

to do this, you need to unbind the dragstart event registered by the slippery slider, as shown above, before binding the draggble element to the 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 works here http://jsfiddle.net/samcoolone70/u1burczm/3/

+11
source

All Articles