Как перетащить картинку из одной области в другую на 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="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/1.jpg"></li>
	  <li class="default"><img src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/2.jpg"></li>
	  <li class="default"><img src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/3.jpg"></li>
	  <li class="default"><img src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/4.jpg"></li>
	</ul>

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

</body>
</html>

 

С помощью функции sortable({connectWith: “#block1, #block2″}) – мы определяем области, которые будут взаимодействовать между собой.

Перемещать можно все элементы внутри этих блоков, то есть если я добавляю в какой-нибудь из блоков, например, параграф “P”:

<p>Какой-то текст</p>

то перемещать можно будет и этот текст.

Рассмотрим реальный пример.

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

 

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>