test.js

var _txtViewLoc = { x: 0, y: 0 };

function textViewLocationChangedHandler(e) {
    _txtViewLoc = e.location;
}

function window_load() {
    TXTextControl.addEventListener("textControlLoaded", function () {
        TXTextControl.addEventListener("textViewLocationChanged", textViewLocationChangedHandler);
    });
}

window.addEventListener("load", window_load);

document.querySelectorAll(".drag")
    .forEach((function (x) {
        x.setAttribute("draggable", true);
        x.addEventListener("dragstart", function (event) { drag(event); });
    }))

TXTextControl.addEventListener("ribbonTabsLoaded", function () {
    TXTextControl.ribbon.selectedTab = "tabReports";

    document.getElementById("mainCanvas").addEventListener("drop", function (event) {
        event.preventDefault();
        event.stopPropagation();

        var fieldName = event.dataTransfer.getData("fieldname");
        var mergeField = new TXTextControl.MergeField;
        mergeField.name = fieldName;
        mergeField.text = "«" + fieldName + "»";
        TXTextControl.addMergeField(mergeField);
    });

    document.getElementById("mainCanvas").addEventListener("dragover", function (event) {
        event.preventDefault();
        event.stopPropagation();

        var posX = (event.offsetX + _txtViewLoc.x) * 15;
        var posY = (event.offsetY + _txtViewLoc.y) * 15;

        TXTextControl.setInputPositionByLocation({ x: posX, y: posY })
        TXTextControl.focus();
    });

})

function drag(ev) {
    ev.dataTransfer.setData("fieldname", ev.target.innerText);
}