Question

有一些div有背景div。通过单击设置，当前div隐藏并显示背景div。当我重新安排div（Divs是可排序的）。背景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();
    });

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/

Answer 2

由于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>

java脚本

$(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();          

    });

});

它已经完成了。尝试一下。

使用原始div拖动背景div

2 个答案: