ソート可能な要素を閉じたパネルに移動するにはどうすればよいですか（ドロップオフは.panel-heading）？jquery uiソート可能、ブートストラップアコーディオン、.panel-heading
例：https://jsfiddle.net/yaroslaw/jsgh2xvk/
$(".table-tags tbody").sortable({
connectWith: ".table-tags tbody",
items: "> tr",
}).disableSelection();
[OK]を私は最初、今それを見て時間を持っています。
私はこれがあなたの望むものであることを望みます。少なくともこれはあなたの説明からうまくいくと思います。
JSFiddle：JSFiddle
私は要素がタイトルをホバリングされたかどうかを検出するために、ここにStackOverflow上の別の答えから、いくつかのJavaScriptを追加しました。要素が閉じたリストのタイトルをホバリングしている場合は、そのリスト内の要素を削除できるようにするためにそのリストを開きます。コードに質問がある場合。ためらうことはありません。タグ1 25-
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>
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();
}
};
あなたには、いくつかのより多くのあなたの質問を指定してもらえますか？私はあなたが得ようとしていることを何百パーセントも確信していませんか？カーソルを置いたときにパネルを開き、ドロップできるようにしますか？または、それを閉じたリストの上にドロップしたいのですか（それがリストに追加されます）？ –
私はそれを閉じたリストの上にドロップしたいと思います。 – yaroslaw