I am facing an issue with positioning a marker inside a triangle, which is represented by a simple div, as shown in the image below:
https://i.stack.imgur.com/0Q7Lm.pngThe marker needs to be placed exactly at the centroid of the triangle. However, it seems slightly off-center towards the right and possibly bottom.
My attempt to resolve this involves using the jquery ui .draggable method. Below is the CSS styling for the marker:
#marker {
position: absolute;
background: #808080;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: grab;
}
Here is the corresponding jQuery script:
$(document).ready(function () {
var triangle = $("#triangle");
var marker = $("#marker");
var coord = getTriangleCoordinates(triangle);
var center = centroid(coord);
$("#marker").hover(
function () {
$(this).css("filter", "brightness(0.8)");
},
function () {
$(this).css("filter", "brightness(1)");
}
);
$("#marker").mouseup(function () {
$(this).css("background", "salmon");
});
$("#marker").draggable({
drag: function (event, ui) {
var offset = ui.offset;
if (!bounded(offset, coord)) return false;
}
});
marker.css("left", Math.round(center.left) - 5 + "px");
marker.css("top", Math.round(center.top) - 5 + "px");
console.log(coord);
});
Is there a way to ensure that the marker's default center position aligns perfectly with the centroid while still maintaining its draggable functionality?
I experimented with using the transform: translate(-50%, 0) CSS property to adjust the position, but it caused issues with dragging. Any suggestions or assistance would be greatly appreciated. Thank you!