Drag'n'Drop на сайте c JQuery

Немногие из нас используют возможность Drag'n'Drop в интерфейсах на своих сайтах, так как сталкиваются в основном с 2мя проблемами:

1. Пользователи к такому ещё не привыкли и им сложно это донести
2. Нет идеальных готовых решений

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

Для создания своих интерфейсов Drag'n'Drop я использую библиотеку jQuery. Основным недостатком готового решения, для меня была невозможность переместить элемент за пределы родителя, если z-index родителя отличен от значения z-index других элементов страницы. Но недавно эта преграда была сломлена, и самое главное с сохранением функциональности.



И так, простой пример реализации:

Инициируем объект перемещения.
$('div.drag').draggable({
containment : 'window',
/* Задаем собственную функцию для создания элемента отображающегося при перетаскивании */
helper : myHelper,
cursor : 'pointer',
cursorAt: { top: 0, left: 0 },
revert: 'invalid',
opacity : 0.4
});


Пишем функцию создания элемента для отображения при перемещении.
function myHelper( event ) {
/* Клонируем перемещаемый элемент */
var clone = $(event.currentTarget).clone();
/* Меняем id элемента и ставим ему высокий z-index для отображения над всеми элементами страницы */
$(clone).attr("id", "myHelper").css("z-index", "10000");
/* Добавляем элемент в главного родителя на всей странице */
$('body').append(clone);
/* Возвращаем как результат ссылку на наш созданный элемент */
return document.getElementById('myHelper');
}


Теперь вы сможете перемещать любые элементы по всей странице, а пример реализации можно посмотреть в интерфейсе этого сервиса.