jquery ui 可排序，引导手风琴，.panel-heading

Question

如何将可排序元素移动到关闭的面板（放在.panel-heading）？

示例：https://jsfiddle.net/yaroslaw/jsgh2xvk/

$(".table-tags tbody").sortable({
    connectWith: ".table-tags tbody",
    items: "> tr",
}).disableSelection();

Answer 1

好的，我现在有时间先看看它。

我希望这是你想要的。至少从您的描述来看，我认为它应该是这样的。

JSFiddle：JSFiddle

我在 stackoverflow 上的另一个答案中添加了一些 javascript，以检测元素是否悬停在标题上。如果元素悬停在关闭列表的标题上，那么我们会打开该列表，这样您就可以将元素拖放到该列表中。如果您对代码有疑问。不要犹豫，问。

HTML

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title collapse-link">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
      </a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <table class="table table-hover border-bottom table-tags">
        <thead>
          <tr>
            <th>Tag</th>
            <th class="text-right">Przypisani agenci</th>
            <th class="text-right">Usuń tag</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="label label-info label-big">panel 1 - tag 1</span></td>
            <td class="text-right">25</td>
            <td class="text-right"><a href="#" class="tag-remove"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
          </tr>
          <tr>
            <td><span class="label label-info label-big">panel 1 - tag 2</span></td>
            <td class="text-right">19</td>
            <td class="text-right"><a href="#" class="tag-remove"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title collapse-link">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Collapsible Group Item #2
      </a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      <table class="table table-hover border-bottom table-tags">
        <thead>
          <tr>
            <th>Tag</th>
            <th class="text-right">Przypisani agenci</th>
            <th class="text-right">Usuń tag</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="label label-info label-big">panel 2 - tag 1</span></td>
            <td class="text-right">25</td>
            <td class="text-right"><a href="#" class="tag-remove"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
          </tr>
          <tr>
            <td><span class="label label-info label-big">panel 2 - tag 2</span></td>
            <td class="text-right">19</td>
            <td class="text-right"><a href="#" class="tag-remove"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title collapse-link">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Collapsible Group Item #3
      </a>
    </h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
      <table class="table table-hover border-bottom table-tags">
        <thead>
          <tr>
            <th>Tag</th>
            <th class="text-right">Przypisani agenci</th>
            <th class="text-right">Usuń tag</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="label label-info label-big">panel 3 - tag 1</span></td>
            <td class="text-right">25</td>
            <td class="text-right"><a href="#" class="tag-remove"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
          </tr>
          <tr>
            <td><span class="label label-info label-big">panel 3 - tag 2</span></td>
            <td class="text-right">19</td>
            <td class="text-right"><a href="#" class="tag-remove"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

标签 Przypisani 菌 乌松标签 外部 - 标签 1 25 外部 - 标签 2 19

JAVASCRIPT

var $links = $('.collapse-link a');

// remove tag
$('body').on('click', '.tag-remove', function (event) {
  event.preventDefault();
  $(this).parents('tr').remove();
})

// drag/drop tags
$(".table-tags tbody").sortable({
    appendTo: document.body,
  connectWith: ".table-tags tbody",
  items: "> tr",
  start: function(event, ui) {
    var draggedItem = ui.helper;
    $(window).mousemove(function(e){
      moved(e, draggedItem);
    });
  },
  stop: function(event, ui) {
    $(window).unbind("mousemove");
  },
  helper: "clone"
}).disableSelection();

//Code from http://stackoverflow.com/questions/3298712/jquery-ui-sortable-determine-which-element-is-beneath-the-element-being-dragge
function moved(e, draggedItem) {
  //Dragged item's position++
  var dpos = draggedItem.position();
  var d = {
    top: dpos.top,
    bottom:    dpos.top + draggedItem.height(),
    left: dpos.left,
    right: dpos.left + draggedItem.width()
  };

  //Find sortable elements (li's) covered by draggedItem
  var hoveredOver = $links.not(draggedItem).filter(function() {
    var t = $(this);
    var pos = t.position();

    //This li's position++
    var p = {
      top: pos.top,
      bottom:    pos.top + t.height(),
      left: pos.left,
      right: pos.left + t.width()
    };

    //itc = intersect
    var itcTop         = p.top <= d.bottom;
    var itcBtm         = d.top <= p.bottom;
    var itcLeft     = p.left <= d.right;
    var itcRight     = d.left <= p.right;

    return itcTop && itcBtm && itcLeft && itcRight;
  });

    if(hoveredOver && hoveredOver.hasClass('collapsed')){
    hoveredOver.click();
  }
};