将 DIV 拖到 Canvas 上时放置位置问题答案

【问题标题】：Drop position problem when dragging DIV onto Canvas将 DIV 拖到 Canvas 上时放置位置问题
【发布时间】：2020-08-16 01:52:25
【问题描述】：

下面的 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);

});

【问题讨论】：

标签： javascript html html5-canvas fabricjs

【解决方案1】：

修复很简单。

我没有尝试对偏移量进行一些奇怪的数学运算，而是更改了

左：x，左：是的

到

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

【讨论】：