Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2017, 19:13
Новичок на форуме
Отправить личное сообщение для Sporium Посмотреть профиль Найти все сообщения от Sporium
 
Регистрация: 23.09.2017
Сообщений: 6

Куки, картинки и надписи!
Есть такой вот код. Позволяет двигать картинки по экрану. Как сделать чтоб по клику на картинку выводилась надпись и чтоб потом ее сохранить в куки (при повторном заходе на страницу должно отображать надпись с последней картинкой которую двигал)
#ПродолжаюучитьJS
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <!-- <link rel="stylesheet" href="lab1.css"> -->
</head>

<body>
 
  <script>
 
 
 
	document.onmousedown = function(e) {

  var dragElement = e.target;

  if (!dragElement.classList.contains('draggable')) return;

  var coords, shiftX, shiftY;

  startDrag(e.clientX, e.clientY);
  
  
  document.onmousemove = function(e) {
    moveAt(e.clientX, e.clientY);
  };

  dragElement.onmouseup = function() {
	  
	   // dragElement.onmouseup = function() {   мышка вверх
		   
    finishDrag();
  };


  // -------------------------

  function startDrag(clientX, clientY) {

    shiftX = clientX - dragElement.getBoundingClientRect().left;
    shiftY = clientY - dragElement.getBoundingClientRect().top;

    dragElement.style.position = 'fixed';

    document.body.appendChild(dragElement);

    moveAt(clientX, clientY);
  };

  function finishDrag() {
     // конец переноса, перейти от fixed к absolute-координатам
    dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
    dragElement.style.position = 'absolute';

    document.onmousemove = null;
    dragElement.onmouseup = null;
  }

  function moveAt(clientX, clientY) {
    // новые координаты
    var newX = clientX - shiftX;
    var newY = clientY - shiftY;

     // ------- обработаем вынос за нижнюю границу окна ------
  // новая нижняя граница элемента
    var newBottom = newY + dragElement.offsetHeight;

    // если новая нижняя граница вылезает вовне окна - проскроллим его
    if (newBottom > document.documentElement.clientHeight) {
      // координата нижней границы документа относительно окна
      var docBottom = document.documentElement.getBoundingClientRect().bottom;
  // scrollBy, если его не ограничить - может заскроллить за текущую границу документа
    // обычно скроллим на 10px
    // но если расстояние от newBottom до docBottom меньше, то меньше
   var scrollY = Math.min(docBottom - newBottom, 10);

     // ошибки округления при полностью прокрученной странице
    // могут привести к отрицательному scrollY, что будет означать прокрутку вверх
    // поправим эту ошибку
	if (scrollY < 0) scrollY = 0;

      window.scrollBy(0, scrollY);

      // резким движением мыши элемент можно сдвинуть сильно вниз
    // если он вышел за нижнюю границу документа -
    // передвигаем на максимально возможную нижнюю позицию внутри документа
    newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
    }


     // ------- обработаем вынос за верхнюю границу окна ------
	 if (newY < 0) {
    // проскроллим вверх на 10px, либо меньше, если мы и так в самом верху
       var scrollY = Math.min(-newY, 10);
      if (scrollY < 0) scrollY = 0; // поправим ошибку округления

      window.scrollBy(0, -scrollY);
      // при резком движении мыши элемент мог "вылететь" сильно вверх, поправим его
	  newY = Math.max(newY, 0);
    }


    // зажать в границах экрана по горизонтали
  // здесь прокрутки нет, всё просто
   if (newX < 0) newX = 0;
    if (newX > document.documentElement.clientWidth - dragElement.offsetHeight) {
      newX = document.documentElement.clientWidth - dragElement.offsetHeight;
    }

    dragElement.style.left = newX + 'px';
    dragElement.style.top = newY + 'px';
  }

 // отменим действие по умолчанию на mousedown (выделение текста, оно лишнее)
 return false;
}

  </script>
 

 
	<div id="im1" >
	

<img src="1.jpg" width="200" class="draggable"  >
  
</div>  
		<div id="im2">
<img src="2.jpg" width="200" class="draggable" >
  
</div> 
		<div id="im3">
<img src="3.jpg" width="200" class="draggable" >
  
</div>


  

</body>

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2017, 19:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sporium,
искать по форуму localStorage
Ответить с цитированием
  #3 (permalink)  
Старый 30.09.2017, 02:44
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
Помогите с кодом сохранения параметром CheckBox-ов в куки Konstantine jQuery 0 26.05.2012 16:20
Одно событие во всех окнах одного домена kdn1990 Events/DOM/Window 18 25.04.2012 20:11
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42