我有一个knockout js视图模型中的照片列表,我希望能够在它们之间交换(实际上更正确的术语是复制一个在另一个之上)。下面是我的简化视图模型:
define(['durandal/app', 'knockout', 'jquery'], function(app, ko, jquery) {
var miscPhotos = ko.observableArray();
var draggedPhoto = ko.observable();
function handleDragStart(data, e) {
// e.preventDefault();
draggedPhoto(data);
console.log('dragStart');
return true;
}
function handleDragOver(e) {
e.preventDefault();
console.log('dragOver');
}
function handleDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop');
}
return {
miscPhotos: miscPhotos,
handleDrop: handleDrop,
handleDragOver: handleDragOver,
handleDragStart: handleDragStart
}
});
简化后的UI也出现了
<div id="holder" data-bind="foreach: miscPhotos">
<div class="pull-left well well-small" draggable="true"
data-bind="event:{
dragstart: function(data, e){ $root.handleDragStart($data, e);},
dragover:function(data, e){ $root.handleDragOver( e);},
drop:function(data, e){ $root.handleDrop(e, $data);}}
">
<div class="thumb">
<img class="thumb"
title="" style="display: block"
data-bind="attr: {src: 'data:image;base64,' + PhotoData()}"
/>
</div>
</div>
当我尝试在另一张照片上复制一张照片时,只有dragstart事件触发,拖放事件不会触发
解决方案:
你需要在你的dragstart定义中添加return true:
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
为了使其工作,您需要更改处理程序函数签名以使用(data, event)的Knockout约定:
handleDragStart(data, e)
...
handleDragOver(data, e)
...
handleDrop(data, e)
我做了一个小提琴来测试这个…我不得不稍微重写一下视图模型,我跳过了依赖语句,因为没有它更容易进行操作。但代码基本上和你的一样,希望你能看懂。我还在视图模型中添加了一些测试数据url,这样就有了一个工作演示。
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());