JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="http://cedric-masson.com/HL.jpg"></script>
<script src="http://cedric-masson.com/transparent.png"></script>
<div class="carteHL">
	<div class="syst1"></div>
	<div class="syst2"></div>
	<div class="syst3"></div>
	<div class="syst4"></div>
	<div class="syst5"></div>
</div>

CSS

body {background:black;}

div.carteHL {background-image: url(http://cedric-masson.com/HL.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: blue;
    border: 1px solid #aaa;
    width: 750px;
    height: 550px;
    margin: 25px auto;
	cursor:move;
}

div.syst1, div.syst2, div.syst3, div.syst4, div.syst5 {
	background:#ff0;
	background-position: 0 0;
	width:2px;
	height:2px;
	border:#ff0 1px  solid;
	border-radius:15px;
	display:block;
    position:relative;
}

div.syst1 {margin-top:220px;margin-left:326px}
div.syst2 {margin-top:246px;margin-left:232px}
div.syst3 {margin-top:368px;margin-left:545px}
div.syst4 {margin-top:540px;margin-left:1244px}
div.syst5 {margin-top:463px;margin-left:1000px}

JavaScript

$(document).ready(function(){
    var $bg = $('.carteHL'),
        elbounds = {
            w: parseInt($bg.width()), 
            h: parseInt($bg.height())
        },
        bounds = {w: 1251 - elbounds.w, h: 750 - elbounds.h},
        origin = {x: 0, y: 0},
        start = {x: 0, y: 0},
        movecontinue = false;
    
    function move (e){
        var inbounds = {x: false, y: false},
            offset = {
                x: start.x - (origin.x - e.clientX), 
                y: start.y - (origin.y - e.clientY)
            };
        
        inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
        inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;
        
        if (movecontinue && inbounds.x && inbounds.y) {
            start.x = offset.x;
            start.y = offset.y;
            
            $(this).css('background-position', start.x + 'px ' + start.y + 'px');
        }
        
        origin.x = e.clientX;
        origin.y = e.clientY;
        
        e.stopPropagation();
        return false;
    }
    
    function handle (e){
        movecontinue = false;
        $bg.unbind('mousemove', move);
        
        if (e.type == 'mousedown') {
            origin.x = e.clientX;
            origin.y = e.clientY;
            movecontinue = true;
            $bg.bind('mousemove', move);
        } else {
            $(document.body).focus();
        }
        
        e.stopPropagation();
        return false;
    }
    
    function reset (){
        start = {x: 0, y: 0};
        $(this).css('backgroundPosition', '0 0');
    }
    
    $bg.bind('mousedown mouseup mouseleave', handle);
    $bg.bind('dblclick', reset);
});