The insertAtCaret
code is not really what you need for this situation. You've already got a good handle on the required transaction - you need to use the ui.draggable
element in the drop
event to manually add some text to the correct cell. You just need a few final steps.
Now, one key piece of information is that Handsontable wants you to set cell data by coordinate, which means you need to know the column and row of the thing you want to set, not just have a javascript reference to the actual dom element. For that, we can use jQuery's index method.
- Find out what cell the draggable has been dropped on.
- Determine what that cell's column and row are.
- Use Handsontable's
setDataAtCell
method to change the data.
$("#excel_table").droppable({
...
drop: function(event, ui) {
// Get a reference to the handsontable instance
var ht = $('#excel_table').handsontable('getInstance');
// Hide the helper, so that we can use .elementFromPoint
// to grab the item beneath the cursor by coordinate
ui.helper.hide();
var $destination = $(document.elementFromPoint(event.clientX, event.clientY));
// Grab the parent tr, then the parent tbody so that we
// can use their index to find the row and column of the
// destination object
var $tr = $destination.closest('tr');
var $tbody = $tr.closest('tbody');
var col = $tr.children().index($destination);
var row = $tbody.children().index($tr);
// Use the setDataAtCell method, which takes a row and
// col number, to adjust the data
ht.setDataAtCell(row, col, ui.draggable.text());
},
...
});