解决方案:
您需要将 return true 添加到您的 Dragstart 定义中:
dragstart: function(data, e){ $root.handleDragStart($data, e); return true;},
更多信息:
Dragover 不会被触发,因为 Knockout 阻止了 Dragstart 的默认操作,并且如果没有默认操作,就不会从 Dragstart 过渡到 Dragover。
我认为您尝试通过在此处添加“return true”来启用默认操作:
function handleDragStart(data, e) {
// e.preventDefault();
draggedPhoto(data);
console.log('dragStart');
return true;
}
但是,由于您绑定事件的方式,您需要做的(这是最快的修复)是将“return true”移动到绑定中的内联函数中:
dragstart: function(data, e){ $root.handleDragStart($data, e); return true;},
我想这会为你解决的。但是,如果您愿意,您可以稍微简化您的代码。您没有从事件绑定中的内联函数传递任何额外的参数,因此实际上不需要内联函数。您可以按原样提供视图模型函数:
dragstart: $root.handleDragStart,
dragover: $root.handleDragOver,
drop: $root.handleDrop
为了使其工作,您需要更改处理程序函数签名以使用(数据,事件)的 Knockout 约定:
handleDragStart(data, e)
...
handleDragOver(data, e)
...
handleDrop(data, e)
我做了一个小提琴来测试这个......我不得不稍微重写你的视图模型,我跳过了依赖语句只是因为没有它做小提琴会更容易一些。但代码与你的基本相同,所以希望你能够顺利阅读它。我还在视图模型中添加了一些测试数据 URL,这样就有了一个有效的演示。
http://jsfiddle.net/NLvm7/ http://jsfiddle.net/NLvm7/
当我在那里时,我还继续展示了如何在handleDrop函数中将被拖动的照片中的数据写入您放置它的照片中,从而实现将一张照片复制到另一张照片上的目标:
// The next 3 lines shows how you can copy the dragged photo onto the dropped target...
var context = ko.contextFor(e.target);
var index = context.$index();
this.miscPhotos()[index].PhotoData(this.draggedPhoto().PhotoData());