1

背景の 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();
    });

フィドル

divを再配置し、設定をクリックして問題を確認します

4

2 に答える 2

2

バック パネルとフロント パネルの両方を 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/

于 2013-02-14T08:53:33.513 に答える