Knockout.js 为什么'；t ondrop在击倒数据绑定中开火

我正在尝试使用击倒JS拖放，但无法使其工作。有什么原因的建议吗

<td data-bind="event: {ondrop: $root.HandleDrop}">

---

如评论中所述，您必须创建自定义绑定处理程序才能实现此目的

查看模型：

(function() {
    var _dragged;
    ko.bindingHandlers.drag = {
        init: function(element, valueAccessor) {
            var dragElement = $(element);
            var dragOptions = {
                helper: 'clone',
                revert: true,
                revertDuration: 0,
                start: function() {
                    _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                },
                cursor: 'default'
            };
            dragElement.draggable(dragOptions).disableSelection();
        }
    };

    ko.bindingHandlers.drop = {
        init: function(element, valueAccessor) {
            var dropElement = $(element);
            var dropOptions = {
                drop: function(event, ui) {
                    valueAccessor().value(_dragged);
                }
            };
            dropElement.droppable(dropOptions);
        }
    };
})();
var ViewModel = function () {
    var self = this;
    self.user = ko.observableArray([{name:'jhon'},{name:'charlie'},{name:'jack'}]);
    self.movedArray=ko.observableArray()
    self.latestone = ko.computed({
        read: function() {
            return self.movedArray().length ? self.movedArray()[0] : "";
        },
        write: function(value) {
            self.movedArray.unshift(value); // adds as first element in array 
        },
        owner: self
    });
};

$(function() {
    ko.applyBindings(new ViewModel());
});

<ul id="dragbox" data-bind="foreach:user">
    <li data-bind="text:$data.name,drag:{value:$data.name}"></li>
</ul>

<hr/>
<div id="dropbox" data-bind="drop: {value: latestone}">
        <div data-bind="visible:(!!latestone())">
            <p >Thanks for adding <span data-bind="text:latestone"></span>!</p>
            <span>So far, you've added:</span>
            <ul data-bind="foreach: movedArray">
                <li data-bind="text: $data"></li>
            </ul>
        </div>
    </div>
<hr/>

查看：

(function() {
    var _dragged;
    ko.bindingHandlers.drag = {
        init: function(element, valueAccessor) {
            var dragElement = $(element);
            var dragOptions = {
                helper: 'clone',
                revert: true,
                revertDuration: 0,
                start: function() {
                    _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                },
                cursor: 'default'
            };
            dragElement.draggable(dragOptions).disableSelection();
        }
    };

    ko.bindingHandlers.drop = {
        init: function(element, valueAccessor) {
            var dropElement = $(element);
            var dropOptions = {
                drop: function(event, ui) {
                    valueAccessor().value(_dragged);
                }
            };
            dropElement.droppable(dropOptions);
        }
    };
})();
var ViewModel = function () {
    var self = this;
    self.user = ko.observableArray([{name:'jhon'},{name:'charlie'},{name:'jack'}]);
    self.movedArray=ko.observableArray()
    self.latestone = ko.computed({
        read: function() {
            return self.movedArray().length ? self.movedArray()[0] : "";
        },
        write: function(value) {
            self.movedArray.unshift(value); // adds as first element in array 
        },
        owner: self
    });
};

$(function() {
    ko.applyBindings(new ViewModel());
});

<ul id="dragbox" data-bind="foreach:user">
    <li data-bind="text:$data.name,drag:{value:$data.name}"></li>
</ul>

<hr/>
<div id="dropbox" data-bind="drop: {value: latestone}">
        <div data-bind="visible:(!!latestone())">
            <p >Thanks for adding <span data-bind="text:latestone"></span>!</p>
            <span>So far, you've added:</span>
            <ul data-bind="foreach: movedArray">
                <li data-bind="text: $data"></li>
            </ul>
        </div>
    </div>
<hr/>

谢谢添加

到目前为止，您已经添加了：

工作小提琴

---

我刚刚用他的小提琴做了这件事。

你试过用

drop

而不是

ondrop

？我试过，但没有火。你的浏览器支持拖放事件吗？

ondrop

我们在文档中提到过这个事件吗？给我们分享更多的代码。cheers@James是的，我正在运行最新版本的Chrome。在我上面提到的文档中，它说：“这可以用于绑定到任何事件，如按键、鼠标悬停或鼠标悬停。”为什么我必须创建自定义绑定处理程序？没错，非常同意。这是个人的

选择

我觉得使用绑定处理程序是一种更好的做法，它可以更好地控制您的操作（即复杂的逻辑），请务必参考文档以备不时之需。现在我尝试了以下方法：，其中handleunwantedvents现在执行event.preventDefault。HandleDrop是不变的，我实际上正在接近它！很高兴听到。这篇文章很有帮助（jquery中的事件）。干杯