【发布时间】：2019-08-05 01:44:18
【问题描述】：
在下面的代码中我有：
- 点击相应按钮时弹出的 div
- 如果你拖动它们，（最后一个）活动对象应该在顶部
目前我的代码在最后一个活动元素被买到前面的地方不能按预期工作。我正在尝试创建一个可扩展的解决方案，以后可能会有大约五个左右的按钮具有不同的内容。
另外，有没有办法让 div 在显示它们的按钮附近弹出？如果我在点击之前拖动按钮，距离有点大。
我目前的尝试是这样的：
$(function() {
/* Combine on ready logic into one place */
$("#button-one").draggable({
stack: 'div',
containment: "body"
});
$("#content-one").draggable({
stack: 'div',
containment: "body"
});
/* Hide all trip elements except for first */
$('.trip', '#content-one').not(':first').hide();
});
$('#button-one').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
$("#content-one").toggle();
}
});
$('#content-one').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-one');
let next = trip.next().length === 0 ? $('.trip:first', '#content-one') : trip.next();
trip.hide();
next.show();
}
});
$(function() {
$("#button-two").draggable({
stack: 'div',
containment: "body"
});
});
$('#button-two').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
// your click function
$("#content-two").toggle();
}
});
$(function() {
$("#content-two").draggable({
stack: 'div',
containment: "body"
});
});body,
html {
position: absolute;
padding: 0;
margin: 0;
width: 100%;
overflow-x: hidden;
overflow-y: inherit;
cursor: default;
}
#content {
max-width: 100vw;
height: 150vh;
}
#one {
left: 5%;
top: 5%;
position: absolute;
}
#button-one {
width: 100px;
height: 100px;
background-color: cyan;
position: absolute;
}
#content-one {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
top: 20px;
left: 20px;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
#two {
left: 15%;
top: 15%;
position: absolute;
}
#button-two {
width: 100px;
height: 100px;
background-color: darkgrey;
position: absolute;
}
#content-two {
display: none;
cursor: all-scroll;
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: green;
color: white;
}<div id="content">
<div id="one">
<div id="button-one">Button 1</div>
<div id="content-one">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
</div>
<div id="two">
<div id="button-two">Button 2</div>
<div id="content-two">Hey</div>
</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>感谢您的帮助！ :)
【问题讨论】：
-
当内容打开并且开始拖动按钮时，内容会发生什么？
-
@RokoC.Buljan 在这种情况下，内容应该保持在当前位置，并且按钮应该在所有对象的顶部。只有当按钮被点击时，内容才会被隐藏。
标签： javascript jquery html css draggable