Question

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

== VISIBLE ==
元素1
元素2
元素3
== HIDDEN ==
元素4

如果没有隐藏项目，表格会显示一行显示“无隐藏项目”：

== VISIBLE ==
元素1
元素2
元素3
元素4
== HIDDEN ==
没有隐藏物品

我尝试使用包含两个标签的表格，一个包含可见项目，一个包含隐藏项目。

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

修改

// too much code to paste here

此示例在Chrome中可以使用，因为您可以删除到空列表，但不能在Firefox中。请参阅上面的“问题2”，该消息应该作为一个大丢弃目标。

Answer 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。根据您的选择进行自定义，但保留填充或空格，以便drop事件能够拾取目标。

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

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

Answer 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中我使用了＆lt; ！ - ko if：label =='## empty ##' - ＆gt;没有隐藏的项目＆lt; ！ - / ko - ＆gt;在列表为空时显示消息。

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

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

2 个答案: