淘汰赛可排序表 - 下降到空 tbody答案

【问题标题】：knockout sortable table - drop to empty tbody淘汰赛可排序表 - 下降到空 tbody
【发布时间】：2014-10-14 06:29:28
【问题描述】：

我正在尝试模拟 Drupal Admin 的一部分，您可以在其中拖动表格中的项目以重新排序。您还可以将项目拖到表格的“隐藏”部分。

==可见==
元素 1
元素 2
元素 3
==隐藏==
元素 4

当没有隐藏项目时，表格会显示一行显示“没有隐藏项目”：

==可见==
元素 1
元素 2
元素 3
元素 4
==隐藏==
没有隐藏物品

我尝试使用具有两个 tbody 标记的表格来执行此操作，一个包含可见项，另一个包含隐藏项。

问题：您不能将元素拖放到 空 tbody - 没有像素可以拖放。问题 2：显示“无隐藏项目”消息。

编辑

drupal style re-order items, with bugs

// too much code to paste here

此示例在 Chrome 中有效，因为您可以拖放到空列表中，但在 Firefox 中无效。参见上面的“问题 2”，该消息应该作为一个大的放置目标。

【问题讨论】：

请向我们展示您迄今为止尝试过的代码 :-)
好的，我来装个小提琴
谢谢，正在调查
这个separate sortable container 有用吗？有一个隐藏的 tbody，其中有一行，只有在 $root.hidden().length 为零时才可见？我试图让它工作，但失败了:(
嗯，这正是我正在做的事情。我会更新你的。

标签： knockout.js knockout-sortable

【解决方案1】：

以下是实现它的方法..

应用一个CSS，当隐藏数组为空时增加占位符的填充。

<tbody data-bind="css: hidden().length === 0 ? 'empty-placeholder' : '', sortable: { data: hidden, options: { handle: '.sortableHandle', cursor: 'move' } }">
    <tr>
        <td data-bind="text: $data" class="sortableHandle"></td>
    </tr>
</tbody>

在样式表中添加这个 CSS。根据您的选择进行自定义，但保留填充或空间，以便放置事件能够拾取目标。

.empty-placeholder{
    display:block;
    padding:10px 0;
    width:100%;
    background:#eee;
}

JSFIddle : http://jsfiddle.net/rahulrulez/pL0t7o1q/9/

【讨论】：

哇，一百万谢谢！这是一个非常优雅的解决方案 :) ...我做了一个微小的修改，使您的解决方案类似于 Drupal 管理界面example
太棒了。 :-) 很高兴我能帮上忙。

【解决方案2】：

我想出了另一种解决此问题的方法。将观察者添加到两个数组，可见和隐藏。

var ViewModel = function() {
    var self = this;

    self.visible = ko.observableArray(data.visible);
    self.hidden = ko.observableArray(data.hidden);

    // add an empty array placeholder to give the tbody 
    // a tr to show - else it is empty and zero pixels high
    // and impossible to drop anything onto
    self.hidden.subscribe(function(newVal){

        if (self.hidden().length>1) {
            // remove the [no element placeholder]
            self.hidden.remove(function(item) { return item.label == '##empty##' });
        }

        if (self.hidden().length==0) {
            // push something into the table so the tbody is non-zero height
            self.hidden.push({label: '##empty##'});
        }
    });

}

然后在 HTML 中，我使用了 No hidden items 当列表出现时显示一条消息空。

注意：如果您确实使用此方法，则列表中的每个项目（或者在我的情况下，表中的每一行）都需要 jQuery UI '可排序句柄类'。放入没有该类的表格行会破坏它。

【讨论】：