JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

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

			var moving = false;

			var pin_id;
			var pin_left;
			var pin_top;

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

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

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

			$(document).mouseup(function (e) {
				if(moving) {
					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);
				}
			);
		}