Question

我正在尝试使用knockout.js实现文件拖放。

这是我的HTML：

<div type="text" id="filedrag" class="" data-bind="event: {drop: function (data,e) { $root.insertFile(e,data);} }">
    <div id="messages"></div>
</div>

这是我的JS：

self.insertFile = function(e, data) {
    console.log("insertfile called");
    var files = e.target.files || e.dataTransfer.files;
    console.log(files);
};

我从a jsfiddle复制了代码。我不太清楚那个与我的区别。我做错了什么？

Answer 1

这是因为你需要有一个dragover事件来取消默认行为。需要取消dragover事件以允许丢弃。

请参阅https://developer.mozilla.org/en-US/docs/Web/Events/dragover。

我创建了一个代码小提琴，用dragover事件更新，您可以取消默认行为。

小提琴：http://jsfiddle.net/JBJd2/10/
HTML：

<div type="text" id="filedrag" class="drop_zone" data-bind="event: {
    drop:       function (data,e) { $root.insertFile(e,data);},
    dragover:   function(data, e){ $root.dragover(e);} 
}"> 

    <div id="messages"></div>
</div>

JS：

self.insertFile  = function(e, data) {
    e.preventDefault();
    console.log("insertfile called");
    var files = e.target.files || e.dataTransfer.files;
    console.log(files);
};

self.dragover = function(e){
    e.preventDefault();
}

文件拖放不能与knockout.js一起使用

1 个答案: