将“可拖动”放入Handsontable单元格中

Question

我厌倦了使用Handsontable jQuery模块和jQuery UI拖放功能，但没有成功。我已经使用insertAtCaret函数编写了一些代码，但是我在使用Handsontable时遇到了麻烦。 我希望能够从Handsontable表的外部拖动元素，并将其放入单元格。我知道，我必须以某种方式更新单元格... 请帮忙......

CODE：

$.fn.insertAtCaret = function (myValue) {
    return this.each(function(){
        //IE support
        if (document.selection) {
            this.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
        }
        //MOZILLA / NETSCAPE support
        else if (this.selectionStart || this.selectionStart == '0') {
            var startPos = this.selectionStart;
            var endPos = this.selectionEnd;
            var scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
            this.focus();
            this.selectionStart = startPos + myValue.length;
            this.selectionEnd = startPos + myValue.length;
            this.scrollTop = scrollTop;
        } else {
            this.value += myValue;
            this.focus();
        }
    });
};

My JSFiddle with source

Answer 1

insertAtCaret代码实际上并不是您需要的。您已经很好地处理了所需的事务 - 您需要使用ui.draggable事件中的drop元素手动将一些文本添加到正确的单元格中。你只需要做几个最后的步骤。

现在，一个关键信息是Handsontable希望您通过坐标设置单元格数据，这意味着您需要知道要设置的事物的列和行，不只有一个javascript引用实际的dom元素。为此，我们可以使用jQuery's index method。

1. 找出可拖动的单元格。
2. 确定该单元格的列和行是什么。
3. 使用Handsontable的setDataAtCell方法更改数据。

Live Demo

$("#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());
    },
    ...
});