我已经为移动设备制作了一个旋转木马,您可以在其中拖动卡片,当您释放它时,它会使用jquery-ui draggable落后于其他卡片(请参阅片段)。
当我向左或向右拖动时,我的工作正常,但问题是:当用户想要向下或向上滚动时,拖动会触发,他无法滚动向下或向上。
我该如何解决?我尝试使用“axis:'x'”选项,但它不起作用,因为用户永远不会“完美”地垂直滚动。
可能检测到触摸事件的角度?
提前致谢
var $draggable = $('.card').draggable({
revert: true,
revertDuration: 0,
axis: 'x'
});
$draggable.on("dragstop", function(event, ui) {
var self = $(this);
var container = self.closest('.container');
container.append(self);
self.removeAttr('style');
});
.container {
position: relative;
max-width: 350px;
padding-top: 60%;
margin: 100px auto;
}
.card {
position: absolute;
top: 0;
left: 0;
transform-origin: center;
transition: top 0.3s;
transition: left 0.3s;
width: 250px;
height: 300px;
border-radius: 5px;
}
.card1 {
background: rgb(216, 120, 47);
}
.card2 {
background: rgb(230, 249, 54);
}
.card3 {
background: rgb(73, 249, 54);
}
.card:nth-child(1) {
z-index: 10;
top: 0px;
transform-origin: top;
transform: scale(1);
opacity: 1;
transition: all 0.3s;
}
.card:nth-child(2) {
z-index: 9;
top: -15px !important;
transform-origin: top;
transform: scale(0.9);
opacity: 0.9;
transition: all 0.3s;
}
.card:nth-child(3) {
z-index: 8;
top: -30px !important;
transform-origin: top;
transform: scale(0.8);
opacity: 0.8;
transition: all 0.3s;s
}
.card:nth-of-type(1n+4) {
z-index: 7;
top: -45px;
transform-origin: top;
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
}
li {
display: inline-block;
}
<body>
<ul class="container">
<li class="card card1"></li>
<li class="card card2"></li>
<li class="card card3"></li>
</ul>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="main.js"></script>
</body>