<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 70px;
background-image: url('https://javascript.ru/forum/images/ca_serenity/misc/logo.gif');
font-size: 30px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
var div = document.querySelectorAll('div');
div.forEach((el, i)=>{
el.onmousedown = function(e) {
div.forEach(el=>el.textContent = '');
el.textContent = 'картинка '+i;
localStorage.setItem('div', i);
var a = [e.pageX - el.getBoundingClientRect().left, e.pageY - el.getBoundingClientRect().top];
document.onmousemove = e => el.style.cssText = 'position:absolute; left:'+(e.pageX-a[0])+'px; top:'+(e.pageY-a[1])+'px';
el.onmouseup = function() {
document.onmousemove = null;
el.onmouseup = null;
};
};
el.ondragstart = e => false;
});
var n = localStorage.getItem('div')
div[n].textContent = 'картинка '+ n;
</script>
</body>
</html>