Мне нужно создать веб-страницу с двумя списками, которые можно менять местами. В списках есть элементы, которые также можно менять местами или перемещать из одного списка в другой.
Я использовал 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).
Все работает, как и ожидалось, за исключением перемещения списков. При перемещении списка я ожидаю, что заполнитель для перетаскивания будет выглядеть так:
но я получаю:
Что я делаю неправильно? Как я могу достичь этих ожидаемых результатов?