1

有一些带有背景 div 的 div。通过单击设置，当前 div 隐藏并显示背景 div。当我重新排列 div 时（Div 是可排序的）。背景 div 保留其原始位置。然后当我想查看它的背景（设置 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();
    });

小提琴

重新排列div然后点击设置查看问题

4

2 回答 2

2

您可以简单地用单个元素包装后面板和前面板，并将其作为排序目标。所以，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/

于 2013-02-14T08:53:33.513 回答
1

由于 class=panel 和 sortable 你面临这个问题所以我做了两个改变。1. 添加了一个带有 class=panel 的 div，并从所有部分中删除了 class=panel 2. 将 java 脚本更改了一点 HTML

<!doctype html>

<body>

<div id="pagewrap"> 
    <aside id="sidebar">
<div class="pannel">
        <section id="pannel_front_1" >
            <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" 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>
        <div class="pannel">
        <section id="pannel_front_2" >
            <h4 class="pannel_title">Pannel 2</h4>
            <span class="flip_div div_menu" attached-with="pannel_back_2" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
        </section>

        <section id="pannel_back_2"  style="display:none">
            <h4 class="pannel_title">Back Side 2</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_2">back</span>
                <p>Back Side.</p>
         </section>
        </div>
                <div class="pannel">
        <section id="pannel_front_3" >
            <h4 class="pannel_title">Pannel 3</h4>
            <span class="flip_div div_menu" attached-with="pannel_back_3" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </section>

        <section id="pannel_back_3" style="display:none">
            <h4 class="pannel_title">Back Side 3</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_3">back</span>
                <p>Back Side.</p>
         </section>
        </div>
                     <div class="pannel">
        <section id="pannel_front_4" >
            <h4 class="pannel_title">Pannel 4</h4>
            <span class="flip_div div_menu" attached-with="pannel_back_4" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </section>

        <section id="pannel_back_4" style="display:none">
            <h4 class="pannel_title">Back Side 4</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_4">back</span>
                <p>Back Side.</p>
         </section>
        </div>
                            <div class="pannel">
        <section id="pannel_front_5" >
            <h4 class="pannel_title">Pannel 5</h4>
            <span class="flip_div div_menu" attached-with="pannel_back_5" >Settings</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </section>

        <section id="pannel_back_5" style="display:none">
            <h4 class="pannel_title">Back Side 5</h4>
            <span class="flip_div div_menu" attached-with="pannel_front_5">back</span>
                <p>Back Side.</p>
         </section>
        </div>


        <!-- pannel end -->
    </aside>
    <!-- sidebar ends-->


</div>
<!-- pagewrap ends-->

</body>
</html>

脚本

$(document).ready(function(){
    $(function() {
        $( "#sidebar" ).sortable({
          connectWith: ".pannel",
        }).disableSelection();
      });

      $('.flip_div').click(function() {               
        var div1 = $(this).parent();
        var div2 = $('#'+$(this).attr('attached-with'));

         $(div1).removeClass('flip in').addClass('flip out').hide();          
         $(div2).removeClass('flip out').addClass('flip in').show();          

    });

});

它已经完成了。试试看。

于 2013-02-14T09:27:47.533 回答