continents drag

by glebe

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="continent" id="continent_7">&nbsp;</div>

<div class="continent" id="continent_6">&nbsp;</div>

<div class="continent" id="continent_3">&nbsp;</div>

<div class="continent" id="continent_2">&nbsp;</div>

<div class="continent" id="continent_5">&nbsp;</div>

<div class="continent" id="continent_4">&nbsp;</div>

<div class="continent" id="continent_1">&nbsp;</div>
<div class="controls">

<div>
<span id='rotator-1-cw'>&lt; </span>
1
<span id='rotator-1-ccw'>&gt;</span>
</div>

<div>
<span id='rotator-2-cw'>&lt;</span>
2
<span id='rotator-2-ccw'>&gt;</span>
</div>

<div>
<span id='rotator-3-cw'>&lt;</span>
3
<span id='rotator-3-ccw'>&gt;</span>
</div>

<div>
<span id='rotator-4-cw'>&lt;</span>
4
<span id='rotator-4-ccw'>&gt;</span>
</div>

<div>
<span id='rotator-5-cw'>&lt;</span>
5
<span id='rotator-5-ccw'>&gt;</span>
</div>

<div>
<span id='rotator-6-cw'>&lt;</span>
6
<span id='rotator-6-ccw'>&gt;</span>
</div>


<div>
<span id='rotator-7-cw'>&lt;</span>
7
<span id='rotator-7-ccw'>&gt;</span>
</div>
</div>

CSS

.continent{
    position: absolute;
  padding:0px;margin:0px;
  /*border:1px solid green;*/
  width: 100px;
  height: 100px;
  background: url(https://mosamack-uploads-production.s3.amazonaws.com/uploads/ckeditor/pictures/206/content_continents.png);
  /*background-color: #f3f3ff;*/
}
#continent_7{
  background-position: 0px -18px,top;
  width: 187px;
  height: 260px;
}
#continent_6{
  left:235px;
  background-position: -235px 0px, top;
  width: 255px;
  height: 277px;

}
#continent_3{
  left:464px;top:141px;
  background-position: -464px -141px, top;
  width: 220px;
  height: 105px;
}
#continent_2{
  left:106px;top:287px;
  background-position: -97px -287px , top;
  width: 235px;
  height: 130px;
}
#continent_5{
  left:474px;top:300px;
  background-position: -470px -300px, top;
  width: 110px;
  height: 130px;
}
#continent_4{
  top:422px;
  background-position: -0px -422px, top;
  width: 400px;
  height: 378px;
}
#continent_1{
  left:478px;top:490px;
  background-position: -475px -490px , top;
  width: 204px;
  height: 311px;
}

JavaScript

dragElement(document.getElementById("continent_1"));
dragElement(document.getElementById("continent_2"));
dragElement(document.getElementById("continent_3"));
dragElement(document.getElementById("continent_4"));
dragElement(document.getElementById("continent_5"));
dragElement(document.getElementById("continent_6"));
dragElement(document.getElementById("continent_7"));

var rotation_1 = 0;
var rotation_2 = 0;
var rotation_3 = 0;
var rotation_4 = 0;
var rotation_5 = 0;
var rotation_6 = 0;
var rotation_7 = 0;
$(document).ready(function() {

$('#rotator-1-ccw').click(function(){
	rotation_1 += 5
	$('#continent_1').css({transform: 'rotate('+rotation_1+'deg)'});
});

$('#rotator-1-cw').click(function(){
	rotation_1 -= 5
	$('#continent_1').css({transform: 'rotate('+rotation_1+'deg)'});
});

$('#rotator-2-ccw').click(function(){
	rotation_2 += 5
	$('#continent_2').css({transform: 'rotate('+rotation_2+'deg)'});
});

$('#rotator-2-cw').click(function(){
	rotation_2 -= 5
	$('#continent_2').css({transform: 'rotate('+rotation_2+'deg)'});
});

$('#rotator-3-ccw').click(function(){
	rotation_3 += 5
	$('#continent_3').css({transform: 'rotate('+rotation_3+'deg)'});
});

$('#rotator-3-cw').click(function(){
	rotation_3 -= 5
	$('#continent_3').css({transform: 'rotate('+rotation_3+'deg)'});
});

$('#rotator-4-ccw').click(function(){
	rotation_4 += 5
	$('#continent_4').css({transform: 'rotate('+rotation_4+'deg)'});
});

$('#rotator-4-cw').click(function(){
	rotation_4 -= 5
	$('#continent_4').css({transform: 'rotate('+rotation_4+'deg)'});
});

$('#rotator-5-ccw').click(function(){
	rotation_5 += 5
	$('#continent_5').css({transform: 'rotate('+rotation_5+'deg)'});
});

$('#rotator-5-cw').click(function(){
	rotation_5 -= 5
	$('#continent_5').css({transform: 'rotate('+rotation_5+'deg)'});
});

$('#rotator-6-ccw').click(function(){
	rotation_6 += 5
	$('#continent_6').css({transform: 'rotate('+rotation_6+'deg)'});
});

$('#rotator-6-cw').click(function(){
	rotation_6 -=...