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有一个小提琴的例子。我希望这段代码可以帮助你，但是你可能会坚持移动被拖动的元素，我不知道为什么。

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

1 个答案: