0

我正在尝试将 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');
    }
});

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

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

4

1 回答 1

2

实际上问题是被拖动的元素属于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');
    }
});

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

于 2012-12-27T09:47:15.430 回答