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.

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/

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

});