html5通过敲除从桌面拖放文件

Question

我正在尝试使用淘汰实现从桌面拖放文件。起始代码取自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参数被用来尝试做一些类似于我之前的问题的事情，在这个问题中，parent能够准确地定位应该删除元素的位置。

我的ViewModel是一个由observableArrays(许多dropzone)组成的observableArray，看起来像这样：

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

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

我理解为什么我不能突出显示正确的元素(我只是选择每个类，但我不理解如何选择父元素)，我不理解为什么parent.elements.push(f.name);没有将文件名添加到正确的父元素。

有人能告诉我问题出在哪里吗？我该怎么解决？

jsFiddle中的p.S.我得到错误：

TypeError:无法读取未定义的属性"dataTransfer">

它告诉我传递了错误的事件，但本地服务器上的相同代码并没有给我这个问题。我在localhost上得到的错误是：

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

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

Answer 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数组。

更新：
解决了CSS问题。(借助$index()和jQuery.eq())

您可以在这里阅读绑定上下文(父、数据、索引等)。