jquery ui sıralanabilir, önyükleme akordeon, .panel-pimi

Question

Sıralanabilir elemanı kapalı panellere nasıl taşıyabilirim (.panel-heading'dan düşüyor)?

Örnek: https://jsfiddle.net/yaroslaw/jsgh2xvk/

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

Answer 1

İlk şimdi bakmak için zaman var olan Ok.

Umarım istediğin budur. En azından bu, açıklamanızın nasıl olması gerektiğini düşünüyorum.

JSFiddle: JSFiddle

ben eleman bir başlık gezinip saptar burada stackoverflow başka bir yanıt bazı javascript eklendi. Öğe kapalı listenin bir başlığını çeviriyorsa, o listeyi açarak o listeyi açabilirsiniz. Kodla ilgili sorularınız varsa. Sormaktan çekinme. etiketi 1 -

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> 

Etiket Przypisani dışında Usuń etiketi Agenci dışında - etiket 2

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