如何结合手风琴与连接排序列表

Question

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

I am almost there: 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');
    }
});

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

我如何修复这个实现，以便用户即使转到手风琴的另一个部分时也能看到他们正在拖动的项目?我将感谢任何帮助解决这个问题，但请使用我提供的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');
    }
});

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