Question

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

我尝试使用event binding实现此功能，因此我的View看起来像这样：

<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是observableArray（许多dropzones）的observableArray，看起来像这样：

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

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

我理解为什么我不能突出显示正确的元素（我只选择每个类，但我无法理解如何选择父元素），我无法理解为什么parent.elements.push(f.name);不添加名称文件到右边的父母。

任何人都可以告诉我这是什么问题，我该如何解决？

P.S。在jsFiddle 我收到错误：

TypeError：无法读取未定义
的属性'dataTransfer'

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

未捕获的TypeError：无法调用未定义的方法'push'

告诉我，我使用父母的想法是错误的。

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函数当前元素（不是父元素）以获取对它的访问{{1}数组。

<强>更新
Solved CSS problem。（借助elements和jQuery $index()）

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

html5使用淘汰赛从桌面拖放文件

1 个答案: