JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map">
	<div class="pin"></div>
</div>

CSS

div#map {
			background-color: rgba(71,146,140,.18);
			background-image: url(map.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			border-radius: 5px;
			border: 2px solid rgba(151,226,210,.2);

			width: 90%;
			height: 90%;
			position: fixed;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

div.pin {
        background-color: black;
			background-image: url(pin.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			-webkit-filter: brightness(0.8);
			filter: brightness(0.8);

			width: 20px;
			height: 20px;
			position: fixed;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

JavaScript

$(function() {

			$("div#map").click(function (e) {
				$('<div class="pin"></div>').css({
					left: (((e.pageX + 3 - $("div#map").position().left) * 100) / $("div#map").width()) + "%",
					top: (((e.pageY - 10 - $("div#map").position().top) * 100) / $("div#map").height()) + "%"
				}).appendTo(this);

				$("div.pin").click(function (e) { e.stopPropagation(); });
			})
			$("div.pin").click(function (e) { e.stopPropagation(); });

			var moving = false;

			var pin_id;
			var pin_left;
			var pin_top;

			$("div.pin").mousedown(function (e) {
				if(e.which == 1) {
					console.log("down");
					moving = true;
					$(this).addClass("moving");
				} else if(e.which == 3) {
					console.log("right");
				}
			});

			$("div.pin").bind('contextmenu', function (e) {
				return false;
			}); 

			$(document).mousemove(function (e) {
				if(moving == true) {
					if(e.pageX <= $("div#map").position().left) {
						pin_left = 0;
					} else if (e.pageY <= $("div#map").position().top) {
						pin_top = 0;
					} else {
						console.log("moving");
						pin_id = 1;
						pin_left = (((e.pageX + 3 - $("div#map").position().left) * 100) / $("div#map").width());
						pin_top =  (((e.pageY - 10 - $("div#map").position().top) * 100) / $("div#map").height());
						$(".moving").css("left", pin_left + "%");
						$(".moving").css("top", pin_top + "%");
					}
				}
			});

			$(document).mouseup(function (e) {
				if(moving == true) {
					console.log("up");
					moving = false;
					$(".moving").removeClass("moving");
					dbMovePin(pin_id, pin_left, pin_top);
				}
			});

		});

		function dbMovePin (pin_id, pin_left, pin_top) {
			$.post (
				"mapsave.php",
				{
					action: "move_pin",
					id: pin_id,
					left: pin_left,
					top: pin_top
				},
				function (data, status) {
					//alert("Data: " + data + "\nStatus: " + status);
				}
			);
		}