I’m trying to use jQuery Draggable
on image background and it’s work.
I can drag the image everywhere.
Now I have div
marker to identify every location on the image. In example code I put Michael Office
that should be on Michael area (see on the image). But I can’t figure it out how to make the marker place into Michael Area.
My question is it possible to put the marker into Michael Area and also when I drag anywhere, the Michael Area marker should be keep there.
$(document).ready(function(){
const container = document.querySelector('.img');
const containerSize = container.getBoundingClientRect();
let imagePosition = { x: 50, y: 50 };
let cursorPosBefore = { x: 0, y: 0 };
let imagePosBefore = null;
let imagePosAfter = imagePosition;
// Helpers
const minMax = (pos) => (pos < 0) ? 0 : (pos > 100) ? 100 : pos;
const setNewCenter = (x, y) => {
imagePosAfter = { x: x, y: y };
container.style.backgroundPosition = `${x}% ${y}%`;
};
const getImageZoom = () => {
return new Promise((resolve, reject) => {
let actualImage = new Image();
actualImage.src = $('#img').css('background-image').replace(/"/g,"").replace(/url(|)$/ig, "");
actualImage.onload = function() {
resolve({
x: zoomX = this.width / containerSize.width - 1,
y: zoomY = this.height / containerSize.height - 1
});
}
});
}
const addEventListeners = (zoomLevels) => {container.addEventListener('mousedown', function(event) {
cursorPosBefore = { x: event.clientX, y: event.clientY };
imagePosBefore = imagePosAfter; // Get current image position
});
container.addEventListener('mousemove', function(event) {
event.preventDefault();
if (event.buttons === 0) return;
let newXPos = imagePosBefore.x + ((cursorPosBefore.x - event.clientX) / containerSize.width * 100 / zoomLevels.x);
let newYPos = imagePosBefore.y + ((cursorPosBefore.y - event.clientY) / containerSize.height * 100 / zoomLevels.y);
setNewCenter(minMax(newXPos), minMax(newYPos));
});
};
getImageZoom().then(zoom => addEventListeners(zoom));
});
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Manrope';
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#page {
margin: 10px;
display: flex;
}
#page .summary {
width: 450px;
}
#page .summary .map-location {
font-size: 25px;
font-weight: bold;
padding: 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
#page .summary table {
width: 100%;
border-collapse: collapse;
}
#page .summary table th {
background: #f1f1f1;
padding: 10px;
border-bottom: 1px solid #c0c0c0;
font-size: 14px;
}
#page .summary table td {
padding: 10px;
}
#img {
position: relative;
width: calc(100% - 50px);
height: calc(100vh - 25px);
background-position: 50% 50%;
background-image: url('https://live.staticflickr.com/3312/3642071233_162baf0108_h.jpg');
cursor: move;
border: 3px solid #5e5e5e;
}
#img:active {
border-color: #007fff;
}
.table {
display: flex;
flex-flow: column;
}
.table-details {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.scroll-helper {
height: calc(100vh - 75px);
overflow-y: scroll;
}
.tbl-data th {
position: sticky;
top: 0;
}
.tbl-data tr {
border-bottom: 1px solid #e7e7e7;
}
.pin {
position: absolute;
left: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="page">
<div class="img" id="img">
<div class="pin" id="pin">Michael Office</div>
</div>
</div>
</body>
</html>