Как перемещать html блоки и элементы мышкой в jQuery

Перетаскивание элементов по экрану с помощью мышки достаточно редкая задача, но она бывает необходима при создании личных кабинетов. Например, когда нужно дать возможность пользователю перемещать лишние окна в другое место или если нужно изменить сортировку li или других элементов на лету, а затем сохранить результат.

Вариантов использования данного скрипта может быть много. В любом случае он будет упрощать жизнь пользователю, а вам на сайт добавит множество дополнительных плюшек.

Чтобы перетаскивать элементы, можно использовать библиотеку jquery-ui.js совместно с методом .draggable(). Посмотреть и скачать демонстрацию можно ниже.

Вариантов использования и настроек у этого скрипта великое множество. Начнем с простого.

1. Заставим перемещаться html элеменет с id #draggable по всему экрану:

<script>
$(document).ready(function(){
$("#draggable").draggable();
});
</script>

На этом код заканчивается! Согласитесь, код очень небольшой. Далее я буду опускать строки с $(document).ready для краткости.

2. Можно перемещать элемент только по оси X или Y.

<script>$("#draggable1").draggable({ axis: "x" });</script>

3. Что, если нам нужно перемещать блок #draggable2 внутри родительского #abc.

<div id="abc" style=" width: 530px; height: 150px; padding: 0.5em; border: 1px solid #888;">
<div id="draggable2"><p>Перемещает Внутри родителя</p></div>
</div>
<script>$("#draggable2").draggable({ containment:'' });</script>

4. Сортировка элементов.

Осуществляется также не сложно. Перетаскиванием мыши мы можем легко менять порядок li элементов в ul структуре. Для правильной работы надо указать id родителя, а все первые элементы, который внутри могут сортироваться.

<ul id="draggable10">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<script>$("#draggable10").sortable({revert: true});</script>

Данные примеры являются основными для демонстрации работы .draggable(). Но у плагина есть множество других настроек и опций. Например, можно отключать перетаскивание или включать его:

$("#draggable7").draggable('disable');//Полностью запрещает работу плагина
$("#draggable7").draggable('enable'); //Разрешает работу плагина

Этот код позволяет примагничиваться только к выбранному элементу (#draggable):

$("#draggable9").draggable({ snap: "#draggable" });

Лично мне этот плагин сильно пригодился при создании скрипта, который на лету меняет порядок блоков в форме с сохранением результатов.