Carousel del gufo con jQuery UI Draggable

Sto cercando di rendere gli elementi nel mio carosello Owl trascinabile ma non sembra funzionare. Ecco il mio 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' }); }); 

Ho distriggersto il trascinamento del mouse per il carosello perché io forse questa potrebbe essere la causa. La function di avvio draggable viene spenta – esso esegue il messaggio di debug sulla console come previsto. L'elemento viene anche clonato. Quindi tutto sembra funzionare se non riesco a trascinarlo!

Qualsiasi aiuto è molto apprezzato.

Per questo è necessario modificare il file owl-carousel.js per funzionare perfettamente con l'evento draggable perché in owl-carousel.js per impostazione predefinita è solo trascinabile in direzione x. mentre ho modificato il file js in modo da poter get la funzionalità che stai cercando. Ecco il link al file js modificato https://www.dropbox.com/s/2lia6kkeimka94o/owl.carousel.js

e in te jquery where stai inizializzando l'Owl-carasoul, basta distruggere il mouseDrag event.and anche posizionare il jquery ui alla fine del tag corporeo. h

Ecco la mia 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 arrayss 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> 

e

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

e per il tag testa

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

e il markup html è

 <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>