将DIV拖动到画布上时的放置位置问题

Question

下面的JavaScript允许我将DIV拖动到画布上。我在弹出窗口中加载多页PDF（实际上是图像文件），并在其上放置画布层，并在特定坐标处在每个画布中加载形状。

下面的代码几乎可以正常工作，除了将div“拖放”到画布上时，它不会拖放到光标所在的位置。 div放到画布上我光标所在的右侧。

页面宽度（918）和高度（1188）是静态的，永远不变。

我假设这与div的偏移量有关，因为它相对于页面的偏移量，但我似乎无法正确处理。

任何建议都值得赞赏。

$('.canvas-container').each(function (index, item) {
var canvasContainer = $(this)[index];
var canvasObject = $("canvas", this)[index];

var divOffsetX, divOffsetY;

var sigDivs = $(".sigFields").last();
divOffsetX = sigDivs.offset().left;
divOffsetY = sigDivs.offset().top;

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.dataTransfer.dropEffect = 'copy';
    return false;
}

function handleDragEnter(e) {
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over');
}

function handleDrop(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    }
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    var div = document.querySelector('.sigFields div.div_dragging');
    console.log('event: ', e);

    var offset = $(this).offset();
    var y = e.clientY - (offset.top + divOffsetY);
    var x = e.clientX - (offset.left + divOffsetX);


    var newSigDiv = new fabric.Rect({
        width: 234,
        height: 24,
        left: x,
        top: y,
        lockRotation: true,
        hasRotatingPoint: false
    });

    fabricCanvas.add(newSigDiv);
    return false;
}

function handleDragEnd(e) {
    [].forEach.call(divs, function (div) {
        div.classList.remove('div_dragging');
    });
}

var divs = document.querySelectorAll('.sigFields div');
[].forEach.call(divs, function (div) {
    div.addEventListener('dragstart', handleDragStart, false);
    div.addEventListener('dragend', handleDragEnd, false);
});

canvasContainer.addEventListener('dragenter', handleDragEnter, false);
canvasContainer.addEventListener('dragover', handleDragOver, false);
canvasContainer.addEventListener('dragleave', handleDragLeave, false);
canvasContainer.addEventListener('drop', handleDrop, false);

}）;

Answer 1

修复很简单。

而不是尝试使用偏移量进行一些怪异的数学，而是更改了

左：x，左：y

到

左：e.layerX，顶部：e.layerY