有一些 div 带有背景 div。通过单击设置,当前 div 隐藏并显示背景 div。当我重新排列 div 时(Div 是可排序的)。背景 div 保留其原始位置。然后当我想查看它的背景(Settings div)时,它会从旧位置旋转它
旋转的脚本
$('.flip_div').click(function() {
var div1 = $(this).parent();
var div2 = $('#'+$(this).attr('attached-with'));
var toHide = div1.is(':visible') ? div1 : div2;
var toShow = div2.is(':visible') ? div1 : div2;
toHide.removeClass('flip in').addClass('flip out').hide();
toShow.removeClass('flip out').addClass('flip in').show();
});
<强> FIDDLE
重新排列div然后点击设置查看问题
最佳答案
您可以简单地用单个元素包裹后面板和前面板,并将其作为排序目标。
因此,HTML(请参阅前后部分的 <div class="single_panel">
):
<div class="single_panel">
<section id="pannel_front_1" class="pannel">
<h4 class="pannel_title">Pannel 1</h4>
<span class="flip_div div_menu" attached-with="pannel_back_1" >Settings</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consequat.</p>
</section>
<section id="pannel_back_1" class="pannel" style="display:none">
<h4 class="pannel_title">Back Side 1</h4>
<span class="flip_div div_menu" attached-with="pannel_front_1">back</span>
<p>Back Side.</p>
</section>
</div>
该新元素的 CSS:
.single_panel{
overflow:hidden;
width: 100px;
float:left;
}
并更新了可排序初始化代码:
$(document).ready(function(){
$(function() {
$( "#sidebar" ).sortable({
connectWith: ".single_panel",
}).disableSelection();
});
关于jquery - 将背景div与原始div一起拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14870638/