我已经使用UL-LI成功完成了此操作，但是由于它的外观和给定的行为，我想使用jQuery手风琴。
当我将手风琴外部的div类组从手风琴中拖入手风琴中时，我希望手风琴可以腾出空间供您放置，以便您可以对可排序手风琴中的商品重新排序。我不确定是否有可能，因为我找不到任何示例。
问题在于它将不接受该放置。如果我在解释问题时做得不好，请告诉我。
HTML
<div class="main_container">
<div class="left_side">
<div id="accordion">
<div class="group">
<h3>Section 1</h3>
<div>
<p>Test 1</p>
</div>
</div>
<div class="group">
<h3>Section 2</h3>
<div>
<p>Test 2</p>
</div>
</div>
<div class="group">
<h3>Section 3</h3>
<div>
<p>Test 3</p>
</div>
</div>
<div class="group">
<h3>Section 4</h3>
<div>
<p>Test 4</p>
</div>
</div>
</div>
</div>
<div class="right_side">
<div class="group" draggable="true">
<h3>Section 5 Drag Me and Drop into Accordion</h3>
<div>
<p>Test 5</p>
</div>
</div>
</div>
</div>
JS
$(function() {
$("#accordion")
.accordion({
header: "> div > h3",
collapsible: true,
active: false,
droppable: true
})
.sortable({
axis: "y",
handle: "h3",
stop: function(event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
//alert('hello 2');
ui.item.children("h3").triggerHandler("focusout");
// Refresh accordion to handle new order
$(this).accordion("refresh");
},
beforeStop: function(event, ui) {
$(this).data("lastItem", ui.item);
//alert('hello 1');
},
accept: ".group",
activeClass: "ui-state-hover",
drop: function(event, ui) {
//alert('hello 3');
//$(this)
// .addClass("ui-state-highlight")
// .find("p")
// .html("Dropped!");
},
receive: function(event, ui) {
//alert('hello 4');
$(this).data("lastItem").find('img').css('opacity', '1');
ui.item.draggable('destroy').css('opacity', '0.2');
}
});
});