Question

以下是我的代码：

<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引起的。

Answer 1

您的事件处理程序need to return true或它们将阻止默认操作。

self.dragStart = function (customer) {
    console.log('dragstart');
    return true;
};

http://jsfiddle.net/j35kfgdx/

Dragstart事件会破坏序列

1 个答案: