jquery плагин перетаскивания

drag-arrange.js — плагин jQuery для перетаскивания HTML элементов

Очень простой jQuery плагин для смены позиции элемента путем перетаскивания. Не требует лишних зависимостей, минимальный размер, удобная настройка.

Если у Вас стоит задача реализовать пользовательский интерфейс, в котором будет присутствовать необходимость перетаскивания элементов, то библиотека drag-arrange.js – это Ваше решение.

Использование плагина jQuery UI перетащить один блок в другой

Подключаем скрипт (не забудьте также подключить саму jQuery):

<script type="text/javascript" src="drag-arrange.js"></script>

HTML структура будет следующая:

<div id="elements-container">
  <div class="draggable-element d-1">Drag 1</div>
  <div class="draggable-element d-2">Drag 2</div>
  <div class="draggable-element d-3">Drag 3</div>
  <div class="draggable-element d-4">Drag 4</div>
</div>

Для стандартного использования всех элементов с единым классом:

$('.draggable-element').arrangeable();

В случае, если хотите указать определенную область, которая будет отвечать за взаимодействие с пользователем:

$('li').arrangeable({dragSelector: '.drag-area'});

Т.е. перетаскиваться будут все элементы li, если пользователь кликнет на элемент с классом .drag-area.

Быстро и элементарно. Скачать плагин jQuery UI перетащить один блок в другой можно по ссылке выше.

3217 просмотров