下面是我的代码：
<body>
<table border="1">
<tbody data-bind="foreach: $root.list1">
<tr data-bind="event:{dragstart: $root.dragStart, dragend: $root.dragEnd}" draggable="true">
<td data-bind="text: Id"> </td>
<td data-bind="text: Name"> </td>
</tr>
</tbody>
</table>
<table border="1" data-bind="event:{drop: $root.dragDrop, dragover: $root.dragOver}">
<tbody data-bind="foreach: $root.list2">
<tr>
<td data-bind="text: Id"> </td>
<td data-bind="text: Name"> </td>
</tr>
</tbody>
</table>
</div>
</body>
var MyViewModel = function () {
var self = this;
self.init = function () {
// Seed some data to list1 and list2.
}
self.list1 = ko.observableArray([]);
self.list2 = ko.observableArray([]);
self.draggingValue = null;
self.dragStart = function(customer){
console.log('dragstart');
};
self.dragEnd = function(){
console.log('dragend');
};
self.dragDrop = function(){
console.log('dragdrop');
};
self.dragOver = function(){
console.log('dragover');
};
}
var Customer = function (Id, Name) {
var self = this;
self.Id = ko.observable(Id);
self.Name = ko.observable(Name);
}
$(document).ready(function () {
var model = new MyViewModel();
model.init();
ko.applyBindings(model);
});
当我运行此页面时，控制台仅显示dragstart。如果我以这种方式更改html：
<tr data-bind="event:{dragend: $root.dragEnd}" draggable="true" ondragstart='console.log("dragstart")'>
然后我的代码工作正常。我认为这个问题是由KO引起的。
您的事件处理程序需要返回true，否则它们将阻止默认操作。
self.dragStart = function (customer) {
console.log('dragstart');
return true;
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句