javascript - Dragstart event breaks the sequence -
below code:
<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 data list1 , 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); }); when run page, console shows dragstart. if change html way:
<tr data-bind="event:{dragend: $root.dragend}" draggable="true" ondragstart='console.log("dragstart")'> then code works fine. think problem caused ko.
your event handlers need return true or prevent default action.
self.dragstart = function (customer) { console.log('dragstart'); return true; };
Comments
Post a Comment