html5 перетаскивание файлов с рабочего стола с нокаутом

Я пытаюсь реализовать перетаскивание файлов с рабочего стола с помощью нокаута. Начальный код взят из html5rocks. .

Я попытался реализовать это с помощью привязки событий, поэтому мой вид выглядит примерно так:

<div class="drop_zone" data-bind="event:{
    dragover:   function(data, e){ $root.dragover(e);},
    drop:       function(data, e){ $root.drop(e, $parent);},
    dragenter:  function(data, e){ $root.dragenter(e);},
    dragleave:  function(data, e){ $root.dragleave(e);}
}">Drop files here</div>

Параметр $parent использовался при попытке сделать что-то похожее на мой предыдущий вопрос, где родитель смог найти, где именно находится элемент следует удалить.

Моя ViewModel представляет собой наблюдаемый массив наблюдаемых массивов (много зон сброса) и выглядит следующим образом:

this.dropZones = ko.observableArray([{
    'elements' : ko.observableArray([])
},{
    'elements' : ko.observableArray([])
}]);

Полный код можно найти в jsFiddle, но проблема в том, что я не могу правильно добавить новые файлы в элемент files. Также я не могу правильно выделить элемент человек dragEntering/Leaving.

Я понимаю, почему я не могу выделить правильный элемент (я просто выбираю каждый класс, но я не могу понять, как выбрать родительский элемент), я не понимаю, почему parent.elements.push(f.name); не добавляет имя файла к правильному родителю.

Может ли кто-нибудь сказать мне, в чем проблема и как я могу ее исправить?

P.S. в jsFiddle я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство dataTransfer неопределенного

который говорит мне, что я передаю неправильное событие, но тот же код на моем локальном сервере не дает мне этой проблемы. Ошибка, которую я получаю на локальном хосте:

Uncaught TypeError: невозможно вызвать метод «push» неопределенного

что говорит мне, что моя идея использования parent была неправильной.


html drag-and-drop knockout.js ko.observablearray
person Salvador Dali    schedule 03.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

1) { $root.drop(e, $data);} вместо { $root.drop(e, $parent);}

2) var files = e.dataTransfer.files; (без originalEvent)

Скрипка. (проблему с css не исправил, сделай сам :))

Вы должны использовать $data вместо $parent, потому что elements является свойством каждого элемента dropZone. Итак, когда вы выполняете итерацию с foreach: dropZones, у вас есть доступ к текущему элементу по $data, и вы должны отправить в функцию $root.drop текущий элемент (не родительский), чтобы получить доступ к нему elements массив.

Обновление:
решена проблема с CSS. (с помощью $index() и jQuery .eq())

Вы можете прочитать о контексте привязки (родительский, данные, индекс и т. д.) здесь.

person Ivan.Srb    schedule 03.03.2014