Как перетащить картинку из одной области в другую на javascript?


Приветствую вас дорогие друзья! В этом уроке я покажу, как можно реализовать перемещение картинок из одной области в другую с помощью простого перетаскивания мышью! Как перетащить картинку из одной области в другую на javascript? Итак, допустим, у вас имеются две области (2 блока div) в каждой из которых размещены изображения. Это могут быть, например, 2 галереи, или 2 физические папки на сервере, например, если вы хотите реализовать файловую систему и так далее. Давайте посмотрим, как выглядят блоки с картинками:   Блоки с картинками   Я взял 4 картинки с животными и разместил их внутри блоков, каждый из которых является списком ul (подробнее ниже в коде).  

Особенности плагина

Изобретать велосипед не нужно, так как реализовывать мы это будем с помощью отличного jquery плагина - jQuery UI - Sortable. Одними из его достоинств является то, что он позволяет перемещать элементы (в данном случае картинки) из одной области в другую, и количество областей не ограничено, то есть может быть хоть 20 изображенных на картинке блоков. Также, плагин позволяет сортировать элементы внутри блока. Давайте рассмотрим код (реализация):
<!DOCTYPE html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<title>Как перетащить картинку из одной области в другую - Seo блог sergey-oganesyan.ru</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>ul{float: left;border: 5px dashed #3C8FB7;padding: 20px;margin: 20px;}</style>
<script>$(function(){$( "#block1, #block2" ).sortable({connectWith: "#block1, #block2"});});</script>
</head>
<body>

	<ul id="block1"><h3>Блок 1</h3>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/1.jpg"></li>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/2.jpg"></li>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/3.jpg"></li>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/4.jpg"></li>
	</ul>

	<ul id="block2"><h3>Блок 2</h3>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/1.jpg"></li>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/2.jpg"></li>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/3.jpg"></li>
	  <li class="default"><img src="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/4.jpg"></li>
	</ul>

</body>
</html>
  С помощью функции sortable({connectWith: "#block1, #block2"}) - мы определяем области, которые будут взаимодействовать между собой. Перемещать можно все элементы внутри этих блоков, то есть если я добавляю в какой-нибудь из блоков, например, параграф "P":
<p>Какой-то текст</p>
то перемещать можно будет и этот текст. Рассмотрим реальный пример.

Демонстрационный пример

  На этом у меня все, подписывайте на обновления и получайте новые уроки первыми! Пока!


Раздел: Программирование

Дата последнего изменения: 2016-01-04 18:52:51

Просмотров: 11741

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*