Question

我需要构建一个包含两个可以交换的列表的网页。列表中的项目也可以交换或从一个列表移动到另一个列表。

我使用knockoutjs和knockoutjs-sortable来实现它。

HTML

<ul class="Tasks" data-bind="sortable: TaskLists">
    <li class="taskList"> 
        <span data-bind="text: Title" style='background: lightgray;'></span>
        <ul data-bind="sortable: Tasks">
           <li class="item"> 
              <span class="taskName" href="#" data-bind="text: name"></span>
            </li>
        </ul>
    </li>
</ul>

JS

var Task = function (name) {
    this.name = ko.observable(name);
}

var ViewModel = function () {
    var self = this;
    self.tasks1 = ko.observableArray([]);
    self.tasks2 = ko.observableArray([]);
    for (var i = 0; i < 5; i++) {
        self.tasks1.push(new Task("This task belongs to list one"));
        self.tasks2.push(new Task("This task belongs to list two"));
    }
    self.TaskList1 = {
        Tasks: self.tasks1,
        Title: 'List One'
    };
    self.TaskList2 = {
        Tasks: self.tasks2,
        Title: 'List Two'
    };
    self.TaskLists = ko.observableArray([]);
    self.TaskLists.push(self.TaskList1);
    self.TaskLists.push(self.TaskList2);
};

ko.bindingHandlers.sortable.options = {
    placeholder: 'ui-state-highlight',
    start: function (e, ui) {
        var dragElements = $('.ui-state-highlight');
        dragElements.css("height", ui.helper.outerHeight());
    }
};
ko.applyBindings(new ViewModel());

CSS

.frame {
    padding: 10px;
    overflow:auto;
}
.item {
    border: black 1px solid;
    width: 100px;
    background-color: #DDD;
    cursor: move;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}
.taskList {
    width: 110px;
    float:left;
    background: lightgreen;
}
.Tasks {
    width:400px;
    border: 1px #eee solid;
    height: 100%;
}
.taskName {
    word-wrap: break-word;
}
.ui-state-highlight {
    background: grey;
    border:1px dashed grey;
}

这是我到目前为止所得到的(fiddle)。

除了移动列表外，所有工作都按预期工作。移动列表时，我希望拖拽式占位符看起来像：

enter image description here

但我明白了：

enter image description here

我做错了什么？我怎样才能达到这些预期的效果呢？

Answer 1

我睡了个好觉后发现了这个问题。我的设计上面有几个陷阱：

嵌套列表没有connectClass，这将有助于敲除 - 排序，找出可以拖动元素的位置。保留此未指定的名称会使其中一个列表接受要拖入其中的项目或完整列表。
可拖动的占位符具有与列表本身不同的样式。这就是为什么可拖动的占位符未正确呈现（参见上面我的问题中的结果屏幕截图）
只有一个占位符定义，既适用于拖动的项目，也适用于拖动的列表，这些内容不佳。

这是一个显示完整工作解决方案的fiddle。

<强> HTML

<div class="frame">
    <ul class="Tasks" data-bind="sortable: {data: TaskLists, connectClass: 'columns', options: { placeholder: 'list-highlight'}}">
      <li class="taskList">
        <span data-bind="text: Title" style='background: lightgray;'></span>
        <ul data-bind="sortable: {data: Tasks, connectClass: 'columnItems', options : { placeholder: 'ui-state-highlight'}}">
            <li class="item">
              <span class="taskName" href="#" data-bind="text: name"></span>
            </li>
        </ul>
       </li>
    </ul>
</div>

<强> JS

var Task = function(name) {
    this.name = ko.observable(name);
}

var ViewModel = function() {
    var self = this;
    self.tasks1 = ko.observableArray([]);
    self.tasks2 = ko.observableArray([]);
    for (var i=0;i<5;i++){ 
        self.tasks1.push(new Task("This task belongs to list one"));
        self.tasks2.push(new Task("This task belongs to list two"));
    }
    self.TaskList1 = {Tasks: self.tasks1, Title:'List One'};
    self.TaskList2 = {Tasks: self.tasks2, Title:'List Two'};
    self.TaskLists = ko.observableArray([]);
    self.TaskLists.push(self.TaskList1);
    self.TaskLists.push(self.TaskList2);
};

ko.bindingHandlers.sortable.options = {
        //placeholder: 'ui-state-highlight',
        start: function (e, ui) {
            var dragItems = $('.ui-state-highlight');
            var dragLists = $('.list-highlight');
            var elementClass = ui.helper[0].className;
            if(elementClass === "item")
                  dragItems.css("height",ui.helper.outerHeight());
            if(elementClass === "taskList")
                  dragLists.css("height",ui.helper.outerHeight());
        }
    };
ko.applyBindings(new ViewModel());

<强> CSS

    .frame{
        padding: 10px;
        overflow:auto;
    }

    .item {
       border: black 1px solid;
       width: 100px;
       background-color: #DDD;
       cursor: move;
       text-align: center;
       margin-top: 2px;
       margin-bottom: 2px;
    }

    .list-highlight{
        width: 100px;
        float:left;
        background: gray;
    }

    .taskList{
        width: 110px;
        float:left;
        background: lightgreen;
    }

    .Tasks{
        width:400px;
        border: 1px #eee solid;
        height: 100%;
    }

    .taskName{
        word-wrap: break-word;
    }

    .ui-state-highlight{
        background: grey;
        border:1px dashed grey;
}

Knockout嵌套可排序列表

1 个答案: