猫头鹰旋转木马与jQuery UI Draggable [英] Owl Carousel with jQuery UI Draggable
问题描述
我试图让我的猫头鹰旋转木马中的元素可拖动,但它似乎没有用。这是我的设置:
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:
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.
推荐答案
为此您需要编辑 owl-carousel.js
文件与draggable事件完美配合,因为在 owl-carousel.js
默认情况下它只能在x方向上拖动。因为我编辑了js文件,所以你可以实现你正在寻找的功能。
以下是Edited js文件的链接
https: //www.dropbox.com/s/2lia6kkeimka94o/owl.carousel.js
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
并在你jquery中初始化猫头鹰carasoul,Just删除 mouseDrag
事件。并将jquery ui放在body标记的末尾。 h
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
这是我的配置
<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>
和
<script>
jQuery( '.item' ).draggable({
start: function( event, ui ) {console.log('dragging');}
});
</script>
和头标记
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
和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>
这篇关于猫头鹰旋转木马与jQuery UI Draggable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!