Как перетащить картинку из одной области в другую на javascript?
Приветствую вас дорогие друзья! В этом уроке я покажу, как можно реализовать перемещение картинок из одной области в другую с помощью простого перетаскивания мышью!


Особенности плагина
Изобретать велосипед не нужно, так как реализовывать мы это будем с помощью отличного 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>то перемещать можно будет и этот текст. Рассмотрим реальный пример.
Раздел: JavaScript с примерами
Дата последнего изменения: 2016-01-04 18:52:51
Просмотров: 11239
Оставить комментарий
* Комментарий: (отменить ответ)
* Ваше имя:
Ваш e-mail:
*