Как сделать перемещаемым элемент страницы — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо …»)
 
Строка 1: Строка 1:
 
Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо загрузить модуль с официального сайта:
 
Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо загрузить модуль с официального сайта:
http://jqueryui.com/download. Оставляем установленными флажки UI Core и Draggable, нажимаем Download. Копируем скаченный файл jquery-ui-1.8.13.custom.min.js в папку сайта js.
+
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">

Версия 11:53, 30 мая 2011

Для этой задачи удобно воспользоваться компонентами библиотеки 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".