Сохранить позицию элемента

190

14 января 2019, 21:00

Подскажите пожалуйста, есть страница с перетаскиванием элемента.

(function(){ 
var elY, elX, obj, zIn=5, d; 
d=document; 
d.onmousedown=press; 
d.onmouseup=release; 
function press(ev){ 
if(ev){//остальные 
obj=ev.target;//элемент который "взяли" 
//если у элемента есть ИД с таким префиксом 
if(obj.id.indexOf("DnD_el")==0){ 
d.onmousemove=elemMove; 
elX=ev.clientX-obj.offsetLeft; 
elY=ev.clientY-obj.offsetTop;}} 
else{//IE 
obj=event.srcElement; 
if(obj.id.indexOf("DnD_el")==0){ 
d.onmousemove=elemMove; 
elY=event.offsetY; 
elX=event.offsetX;}}; 
//зет индекс позволяет любой элемент всегда иметь поверху всех, для этого в переменную нужно изначально занести число не менее общего количества всех перемещаемых элементов 
obj.style.zIndex=zIn++; 
return false; 
 };// 
// 
function elemMove(ev){ 
var y, x; 
if(ev){x=ev.clientX; y=ev.clientY;}//остальные 
else{ 
x=event.clientX+(d.documentElement.scrollLeft||d.body.scrollLeft); 
y=event.clientY+(d.documentElement.scrollTop||d.body.scrollTop);};//ИЕ 
obj.style.left=x-elX+'px'; 
obj.style.top=y-elY+'px'; 
d.getElementById("coord").innerHTML=(y-elY)+' '+(x-elX); 
return false; 
 };// 
// 
function release(){d.onmousemove=null;}; 
 })();//

<html><head> 
<title>Перетаскиваем элементы.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> 
</head> 
<body> 
<div id="DnD_el4" style="position:absolute; cursor:move; padding:5px;">голый текст, берём,<br>и тоже тащим</div> 
<button> 
Сохранить 
</button> 
</body> 
</html>

Нужно сохранить позицию элемента после перетаскивания.

Answer 1

Результат: https://codepen.io/iliyazelenko/pen/vzoaYV?editors=1010

(function(){
  console.log(localStorage.getItem('x'))
var saveX, saveY
var elY = localStorage.getItem('y') || window.innerHeight / 2
, elX = localStorage.getItem('x') || window.innerWidth / 2
, obj = document.querySelector('#DnD_el4')
, zIn=5, d;
obj.style.left=elX+'px';
obj.style.top=elY+'px';
document.querySelector('button').onclick = function () {
  console.log(saveX, saveY)
  localStorage.setItem('x', saveX)
  localStorage.setItem('y', saveY)
}
d=document;
d.onmousedown=press;
d.onmouseup=release;
function press(ev){
if(ev){//остальные
obj=ev.target;//элемент который "взяли"
//если у элемента есть ИД с таким префиксом
if(obj.id.indexOf("DnD_el")==0){
d.onmousemove=elemMove;
elX=ev.clientX-obj.offsetLeft;
elY=ev.clientY-obj.offsetTop;}}
else{//IE
obj=event.srcElement;
if(obj.id.indexOf("DnD_el")==0){
d.onmousemove=elemMove;
elY=event.offsetY;
elX=event.offsetX;}};
//зет индекс позволяет любой элемент всегда иметь поверху всех, для этого в переменную нужно изначально занести число не менее общего количества всех перемещаемых элементов
obj.style.zIndex=zIn++;
return false;
 };//
//
function elemMove(ev){
if(ev){saveX=ev.clientX; saveY=ev.clientY;}//остальные
else{
saveX=event.clientX+(d.documentElement.scrollLeft||d.body.scrollLeft);
saveY=event.clientY+(d.documentElement.scrollTop||d.body.scrollTop);};//ИЕ
obj.style.left=saveX-elX+'px';
obj.style.top=saveY-elY+'px';
d.getElementById("coord").innerHTML=(saveY-elY)+' '+(saveX-elX);
return false;
 };//
//
function release(){d.onmousemove=null;};
 })();//

<html><head>
<title>Перетаскиваем элементы.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
</head>
<body>
  <div id="coord"></div>
<div id="DnD_el4" style="position:absolute; cursor:move; padding:5px;">голый текст, берём,<br>и тоже тащим</div>
<button>
Сохранить
</button>
</body>
</html>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Google Api авторизация изнутри скрипта

Как авторизоваться в google api изнутри javascript скрипта, введя почту и пароль? Сделать авторизацию через всплывающее окно авторизации гугла у меня...

184

javascript

Не переносится элемент

Подскажите пожалуйста, есть страница на которой можно перенести <p> но нельзя перемещать <button>Подскажите пожалуйста, почему

195

MySQL

java.io.IOException: Connection is closed

При получении данных из БД довольно часто возникает такая ошибкаВ чем проблема? Использую среду NetBeans и GlassFish Server

176

MySQL

Объединение нескольких запросов в один

Можно ли из 3 разных запросов объединить в один, если они не связаны? Чтобы в одном select была примерно такая информация:

168