如何将标题和内容元素作为一个组进行排序

Question

我想用jQuery UI对我的div进行排序，但我遇到了一些问题。 .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-box。被拖动的盒子可能不会在.content_mid下消失吗？

Answer 1

如果您只想删除标题，可以排序：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想使用内容移动标题：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;