Owl Carousel with jQuery UI Draggable

Question

I am trying to make the elements in my Owl carousel draggable but it doesn't seem to be working. Here is my set up:

HTML:

<div id="owl" class="owl-carousel">
        <div class="my-owl-item"></div>
        <div class="my-owl-item"></div>
        <div class="my-owl-item"></div>
</div>

JS / jQuery:

jQuery(function(){
        //init carousel
        $(".owl-carousel").owlCarousel({
            autoPlay:false,
            rewindSpeed:500,
            navigation:false,
            pagination:false,
            slideSpeed:1500,
            mouseDrag:false
        });

        //set up draggable
        jQuery( '.my-owl-item' ).draggable({
            start: function( event, ui ) {console.log('dragging');},
            helper : 'clone'
        });
});

I have disabled mouse dragging for the carousel because I though this might be the cause. The draggable start function is being fired - it outputs the debug message to the console as expected. The element is also being cloned too. So all seems to work except I can't drag it!

Any help much appreciated.

Answer 1

For this you need to edit the owl-carousel.js file to work perfectly with the draggable event because in owl-carousel.js by default it is only draggable in x direction. as i edited the js file so you can achieve the functionality you are looking for. Here is the link to the Edited js file https://www.dropbox.com/s/2lia6kkeimka94o/owl.carousel.js

and in you jquery where you are initializing the Owl-carasoul , Just remove the mouseDrag event.and also place the jquery ui at the end of the body tag. h

Here is my configuration

<script>
    $(document).ready(function() {

      var owl = $("#owl-demo");

      owl.owlCarousel({

        // Define custom and unlimited items depending from the width
        // If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
        // For better preview, order the arrays by screen size, but it's not mandatory
        // Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
        // In the example there is dimension with 0 with which cover screens between 0 and 450px

        itemsCustom : [
          [0, 2],
          [450, 4],
          [600, 7],
          [700, 9],
          [1000, 10],
          [1200, 12],
          [1400, 13],
          [1600, 15]
        ],
        navigation : true

      });



    });
    </script>

and

<script>
jQuery( '.item' ).draggable({
start: function( event, ui ) {console.log('dragging');}
});
</script>

and for the head tag

<!-- Owl Carousel Assets -->
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">

and the html markup is

<div id="demo">
        <div id="owl-demo" class="owl-carousel">

          <div class="item"><h1>1</h1></div>
          <div class="item"><h1>2</h1></div>
          <div class="item"><h1>3</h1></div>
          <div class="item"><h1>4</h1></div>
          <div class="item"><h1>5</h1></div>
          <div class="item"><h1>6</h1></div>
          <div class="item"><h1>7</h1></div>
          <div class="item"><h1>8</h1></div>
          <div class="item"><h1>9</h1></div>
          <div class="item"><h1>10</h1></div>
          <div class="item"><h1>11</h1></div>
          <div class="item"><h1>12</h1></div>
          <div class="item"><h1>13</h1></div>
          <div class="item"><h1>14</h1></div>
          <div class="item"><h1>15</h1></div>
          <div class="item"><h1>16</h1></div>
          <div class="item"><h1>17</h1></div>
          <div class="item"><h1>18</h1></div>
          <div class="item"><h1>19</h1></div>
          <div class="item"><h1>20</h1></div>

        </div>
    </div>