我正在尝试设置以下页面:
- 如果单击该按钮,您可以看到一个 div。
- 如果单击该 div,您可以看到下一个 div。
- 如果移动按钮,则不会出现“点击”(所需行为)
我遇到的问题是,如果你移动 div,下一个 div 就会出现 - 这不是我想要的。拖动事件完成后,不应显示“下一个 div”。
这是我的代码:
$(function() {
$("#button").draggable({
stack: 'div',
containment: "body"
});
});
$('#button').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
// click function
$("#content").toggle();
}
});
$(function() {
$("#content").draggable({
stack: 'div',
containment: "body"
});
});
let containers = $('.trip').hide();
let firstContainer = containers.first().show();
containers.on('click', function() {
//Get current element and next sibling
let elem = $(this);
let next = elem.next('.trip');
//Does sibling exist?
if (next.length) {
next.show();
} else {
firstContainer.show();
}
elem.hide();
});
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0;
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
<div id="button">Button</div>
<div id="content">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
有办法解决这个问题吗? :)
(一个可能的问题是纯 JavaScript 与 jQuery 混合在一起)
Thanks
这里要解决的主要问题是区分正则click
事件于#content
,来自其他“类似点击事件”,这些事件也在拖动元素完成期间触发。
您的代码当前有一种执行此操作的方法,您可以将其重新用于所需的行为:
if (! $(this).hasClass('ui-draggable-dragging')) {
/* This was a "regular click event"
}
因此,对于您的代码,您可以对其进行如下修改:
$(function() {
/* Combine on ready logic into one place */
$("#button").draggable({
stack: 'div',
containment: "body"
});
$("#content").draggable({
stack: 'div',
containment: "body"
});
/* Hide all trip elements except for first */
$('.trip', '#content').not(':first').hide();
});
$('#button').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
$("#content").toggle();
}
});
$('#content').on('mouseup', function() {
/* Reuse same logic in #button mouseup handler */
if (!$(this).hasClass('ui-draggable-dragging')) {
/*
If content element if not dragging, treat mouse up as conclusion
of click event and rotate visibility of trip elements like this
*/
let trip = $('.trip:visible', '#content');
let next = trip.next().length === 0 ?
$('.trip:first', '#content') : trip.next();
trip.hide();
next.show();
}
});
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0;
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
<div id="button">Button</div>
<div id="content">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)