如何将手风琴与连接的可排序列表结合起来

Question

我正在尝试将 jquery-ui 可排序列表放入手风琴部分并连接这些列表。这个想法是创建一个紧凑而直观的界面，用于对几个不同类别的项目进行排序。项目通常在一个部分中排序，但有时它们可​​能会被带到另一个手风琴部分。

我几乎在那里：http://jsfiddle.net/arasbm/H5MRw/7/

以下是 HTML 代码示例：

<div id="accordion">
   <h3 class="accordion-header"><a href="#">good</a></h3>
   <div class="accordion-section">
       <ul class="sortable-list">
           <li>dog</li>
           <li>butter</li>
       </ul>
   </div>
   ...
</div>

还有 javascript：

// Setup the accordion
$("#accordion").accordion();
var $accordion = $("#accordion").accordion();

//Setup the sortable list
$("ul.sortable-list").sortable({
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother
    stop: function(event, ui) {
        console.log("an item was moved");
    }
}).disableSelection();

$("h3.accordion-header").droppable({
    over: function(event, ui) {
        //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion
        $(this).css('color', 'red');
        $accordion.accordion('activate', $(this));
    },
    out: function(event, ui) {
        $(this).css('color', 'green');
    }
});

尚未工作的部分是在将项目从一个列表拖到另一个列表时向用户显示正确的视觉反馈。当用户在另一个手风琴部分的标题顶部拖动一个项目时，该部分被激活，但是，由于某种原因，在拖动过程中使用的元素不知何故消失了。该项目实际上仍然存在，如果您继续将其放入列表中，您可以看到占位符出现，您可以将项目放入新位置。

如何修复此实现，以便用户即使在转到手风琴的另一部分时也可以看到他们正在拖动的项目。对于解决此问题的任何帮助，我将不胜感激，但请使用我提供的 the jsFiddle 来演示您的解决方案。

Answer 1

实际上问题是被拖动的元素属于div accordion-section。当您将鼠标悬停在另一个部分时，当前 div 将与拖动的元素一起隐藏。

所以为了解决这个问题，可以创建一个ul temporary来存储被拖拽的元素。这个ul 将在拖动事件结束时被删除。

Javascript：

// Setup the accordion
//$("#accordion").accordion();
var $accordion = $("#accordion").accordion();

//Setup the sortable list
$("ul.sortable-list").sortable({
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother
    stop: function(event, ui) {
        console.log("an item was moved");
        $accordion.find("#tmp").remove();
    },
    start: function(event, ui){
        $accordion.append("<ul id='tmp'></ul>");
        $accordion.find("#tmp").append(ui.item);
    }
}).disableSelection();

$("h3.accordion-header").droppable({
    over: function(event, ui) {
        //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion
        $(this).css('color', 'red');
        $accordion.accordion('activate', $(this));
    },
    out: function(event, ui) {
        $(this).css('color', 'green');
    }
});

Here 有一个小提琴的例子。我希望这段代码对您有所帮助，但您可能会坚持移动拖动的元素，我不知道为什么。