jquery - 将背景div与原始div一起拖动

Question

有一些 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然后点击设置查看问题

Answer 1

您可以简单地用单个元素包裹后面板和前面板，并将其作为排序目标。因此，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();
      });

演示:http://jsfiddle.net/AFfNV/3/