如何將標題和內容元素作爲一個組排序

Question

我想讓我的div可以用jQuery UI排序，但是我有一些問題。 .content_left是盒子應該能夠改變他們的位置的div。

HTML

<script>$("#panel_test").sortable();</script> 
<div class="content_left ui-sortable"> 
    <div id="panel_test"> 
     <div class="panelheadbar pgrau">Test</div> 
     <div id="pc_test" class="panelcontent ui-resizable">text...</div> 
    </div> 
</div> 

但現在我有，我可以單獨改變.panelheadbar和.panelcontent位置的問題。

問題

編輯1的圖像：我如何連接兩個div（content_left，content_right），其中我可以拖動DIV盒。是否有可能拖動框不會消失在.content_mid下？

Answer 1

如果你只是想從能夠進行排序刪除頁眉：如果要移動的標題與內容

$('#panel_test').sortable({ 
 
    items: '> div:not(.panelheadbar)' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="panel_test"> 
 
    <div class="panelheadbar pgrau">Test</div> 
 
    <div class="panelcontent ui-resizable">text 1</div> 
 
    <div class="panelcontent ui-resizable">text 2</div> 
 
    <div class="panelcontent ui-resizable">text 3</div> 
 
    <div class="panelcontent ui-resizable">text 4</div> 
 
    <div class="panelcontent ui-resizable">text 5</div> 
 
    <div class="panelcontent ui-resizable">text 6</div> 
 
</div>

：

$('#panel_test').sortable({ 
 
    handle: '.panelheadbar' // Optional to make only the header move it. 
 
});

.panel_group { 
 
    border:1px solid; 
 
    padding:3px; 
 
} 
 
.panelheadbar { 
 
    font-weight:bold; 
 
    font-size:110%; 
 
    background:lightgrey; 
 
    cursor:move; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="panel_test"> 
 
    <div class="panel_group"> 
 
     <div class="panelheadbar pgrau">Header 1</div> 
 
     <div class="panelcontent ui-resizable">Content 1</div> 
 
    </div> 
 
    <div class="panel_group"> 
 
     <div class="panelheadbar pgrau">Header 2</div> 
 
     <div class="panelcontent ui-resizable">Content 2</div> 
 
    </div> 
 
    <div class="panel_group"> 
 
     <div class="panelheadbar pgrau">Header 3</div> 
 
     <div class="panelcontent ui-resizable">Content 3</div> 
 
    </div> 
 
    <div class="panel_group"> 
 
     <div class="panelheadbar pgrau">Header 4</div> 
 
     <div class="panelcontent ui-resizable">Content 4</div> 
 
    </div> 
 
</div>