Проблема с позицией падения при перетаскивании DIV на холст - PullRequest
Новая
       66

Проблема с позицией падения при перетаскивании DIV на холст

0 голосов
/ 01 мая 2020

javascript ниже позволяет мне перетащить DIV на холст. Я загружаю многостраничный PDF (фактически файлы изображений) во всплывающем окне и размещаю над ними слои холста и загружаю фигуры в каждом холсте в определенных координатах.

Приведенный ниже код в основном работает, за исключением того, что когда div «перетаскивается» на холст, он не падает там, где находится курсор. Div падает вниз и справа от того, где мой курсор находится на холсте.

Ширина страницы (918) и высота (1188) - stati c и никогда не меняются.

Я предполагаю, что это как-то связано со смещением 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);

});

1 Ответ

0 голосов
/ 01 мая 2020

Исправление было простым.

Вместо попытки какой-то странной математики со смещениями я изменил

left: x, left: y

на

слева: e.layerX, сверху: e.layerY

...