Как сделать перемещаемым элемент страницы — различия между версиями
Материал из Umicms
Gordeev (обсуждение | вклад) (Новая страница: «Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо …») |
Whoa (обсуждение | вклад) |
||
| (не показаны 4 промежуточные версии 3 участников) | |||
| Строка 1: | Строка 1: | ||
Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо загрузить модуль с официального сайта: | Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо загрузить модуль с официального сайта: | ||
| − | http://jqueryui.com/download. Оставляем установленными флажки UI Core и Draggable, нажимаем Download. Копируем | + | http://jqueryui.com/download. Оставляем установленными флажки UI Core и Draggable, нажимаем Download. Копируем загруженный файл jquery-ui-1.8.13.custom.min.js в папку сайта js. |
Подключаем скрипты в шаблоне страницы в теге Head: | Подключаем скрипты в шаблоне страницы в теге Head: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| Строка 20: | Строка 20: | ||
Выбираем элемент (например - div), который необходимо перемещать и прописываем в нем id="draggable". | Выбираем элемент (например - div), который необходимо перемещать и прописываем в нем id="draggable". | ||
| + | [[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Верстка в TPL]] | ||
Текущая версия на 08:57, 19 сентября 2018
Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо загрузить модуль с официального сайта: http://jqueryui.com/download. Оставляем установленными флажки UI Core и Draggable, нажимаем Download. Копируем загруженный файл jquery-ui-1.8.13.custom.min.js в папку сайта js. Подключаем скрипты в шаблоне страницы в теге Head:
%system includeQuickEditJs()%
%system includeEditInPlaceJs()%
<script type="text/javascript" src="/js/jquery-ui-1.8.13.custom.min.js"></script>
Прописываем собственно js-скрипт.
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#draggable").draggable();
});
//-->
</script>
Выбираем элемент (например - div), который необходимо перемещать и прописываем в нем id="draggable".
