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);
});