html5从桌面拖放文件与淘汰赛答案

【问题标题】：html5 drag and drop files from desktop with knockouthtml5从桌面拖放文件与淘汰赛
【发布时间】：2014-03-03 12:06:24
【问题描述】：

我正在尝试使用敲除实现从桌面拖放文件。起始码取自html5rocks。

我尝试使用event binding 来实现它，所以我的视图看起来像这样：

<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 参数用于尝试执行类似于我的previous question 的操作，其中父级能够找到应该删除元素的确切位置。

我的 ViewModel 是 observableArrays（许多 dropzones）的 observableArray，看起来像这样：

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

完整的代码可以在jsFiddle 中找到，但问题是我无法正确地将新文件添加到文件元素中。此外，我无法正确突出显示此人为 dragEntering/Leaving 的元素。

我明白为什么我不能突出显示正确的元素（我只是选择每个类，但我不明白如何选择父元素），我不明白为什么parent.elements.push(f.name); 不添加文件名给正确的父母。

谁能告诉我是什么问题，我该如何解决？

附注在 jsFiddle 我得到错误：

TypeError: 无法读取未定义的属性“dataTransfer”

这告诉我我传递了错误的事件，但我本地服务器上的相同代码不会给我这个问题。我在本地主机上遇到的错误是：

未捕获的类型错误：无法调用未定义的方法“push”

这告诉我我使用 parent 的想法是错误的。

【问题讨论】：

标签： html knockout.js drag-and-drop ko.observablearray

【解决方案1】：

1) { $root.drop(e, $data);} 而不是 { $root.drop(e, $parent);}

2) var files = e.dataTransfer.files;（没有originalEvent）

Fiddle。（我还没有解决 css 的问题，你自己做吧：））

您应该使用$data 而不是$parent，因为elements 是每个dropZone 元素的属性。因此，当您使用foreach: dropZones 进行迭代时，您可以通过$data 访问当前元素，并且您应该发送到$root.drop 函数当前元素（不是父元素）以访问它elements 数组。

更新：
Solved CSS problem。（借助 $index() 和 jQuery .eq()）

您可以阅读有关绑定上下文（父、数据、索引等）here。

【讨论】：