3
我有一張用Knockout製作的表格，我想實現拖放界面來安排表格中的項目。基本上，我有一個div來生成新的項目，我可以放到桌子上。此外，表格中的項目必須是可拖動的。Knockout拖放表
我一直在尋找現有的解決方案，其中最好的一個是rniemeyer's，但他使用jQueryUI的sortable小部件。
這對我不起作用的原因是它插入在一個給定的地方數組中的新元素，但我需要它來覆蓋它們。
因此，我開始編寫自己的自定義綁定，但我已經打了另一面牆。當我將生成的物品放入表格中時，我創建一個新元素，添加拖動項目的類和屬性，並將其附加到td，但未完成對該元素的淘汰裝訂...
代碼：
var dragData = {};
ko.bindingHandlers.draggable = {
init: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var dragElement = $(element);
var dragOptions = {
revert: true,
revertDuration: 0,
start: function (event, ui) {
dragData = value.data;
}
};
dragElement.draggable(dragOptions).disableSelection();
}
};
ko.bindingHandlers.droppable = {
init: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var dropElement = $(element);
var dropOptions = {
drop: function (event, ui) {
var div = $('<div/>', {
'data-bind': "draggable: " +
"{ " +
"revert: true," +
"revertDuration: 0," +
"opacity: 0.75," +
"data: " +
"{" +
"selectedSubject: " + dragData.selectedSubject + "," +
"selectedTeacher: " + dragData.selectedTeacher + "," +
"numberOfClasses: 1" +
"}" +
"}"
}).addClass('schedule-item panel-info');
$(div).append('<div class="row">' + dragData.selectedSubject + '</div>');
$(div).append('<div class="row">' + dragData.selectedTeacher + '</div>');
dropElement.html(div);
}
};
if (value.accept)
ko.utils.extend(dropOptions, { accept: value.accept });
if (value.hoverClass)
ko.utils.extend(dropOptions, { hoverClass: value.hoverClass });
if (value.tolerance)
ko.utils.extend(dropOptions, { tolerance: value.tolerance });
dropElement.droppable(dropOptions);
}
ko.applyBindings()返回此錯誤：You cannot apply bindings multiple times to the same element.
因爲數據綁定不這樣做，在表中的項目仍然undraggable。
有沒有辦法完成數據綁定？或者有沒有辦法在jQuery UI sortable小部件中實現「覆蓋」機制？
你有沒有考慮過使用jQuery排序插件的更新事件來觀察項目被放置的位置，並簡單地拼接出直接跟隨該位置的項目？這將有效地「覆蓋」掉落完成後該位置的物品。唯一的缺點是你的陣列會在事件發生前暫時增加一段時間，並刪除位置+ 1中的項目。 –
我已經嘗試過了，但它確實不直觀，我有一種感覺，用戶會遇到問題。看起來，解決方案必須沒有「可排序」小部件。 – Sljux
我沒有看到這個代碼調用'ko.applyBindings' ..無論如何，考慮使用'ko.applyBindingToNode（theCreatedDiv，theBindings）'而不是構建數據綁定屬性。 – user2864740