Немногие из нас используют возможность Drag'n'Drop в интерфейсах на своих сайтах, так как сталкиваются в основном с 2мя проблемами:
Если для решения первой проблемы, можно создавать видео инструкции пользователям, то со второй, приходится мириться и дописывать готовые решения под себя.
Для создания своих интерфейсов Drag'n'Drop я использую библиотеку jQuery. Основным недостатком готового решения, для меня была невозможность переместить элемент за пределы родителя, если z-index родителя отличен от значения z-index других элементов страницы. Но недавно эта преграда была сломлена, и самое главное с сохранением функциональности.
И так, простой пример реализации:
Инициируем объект перемещения.
Пишем функцию создания элемента для отображения при перемещении.
Теперь вы сможете перемещать любые элементы по всей странице, а пример реализации можно посмотреть в интерфейсе этого сервиса.
- Пользователи к такому ещё не привыкли и им сложно это донести
- Нет идеальных готовых решений
Если для решения первой проблемы, можно создавать видео инструкции пользователям, то со второй, приходится мириться и дописывать готовые решения под себя.
Для создания своих интерфейсов 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');
}
Теперь вы сможете перемещать любые элементы по всей странице, а пример реализации можно посмотреть в интерфейсе этого сервиса.