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