Блог старого компьютера

Блог старого компьютера


Главная Jquery Перетаскивание блока на странице

Перетаскивание блока на странице

23.01.2014 17:06 Администратор Jquery
Печать PDF

Когда то давно когда для меня js был темным лесом а jquery и подавно то перетасиквание блока на странице казалось чем то мего нереальным и мега крутым. Сейчас практически каждый вебмастер может это выполнить благодаря jquery. Конечно можно и самостоятельно попробовать написать подобное, но это займет достаточно не мало времени и не факт что у вас выдет на столько это хорошо как в проверенном jquery плагине.

И так этот замечательный плагин называется jqueryUi Draggable. Для того чтоб заставить подчинятся блок нашим перетаскиваниям необходимо выполнить нескольо простых действий

  1. Создать блок (к примеру серый что его видно быо)
  2. Подключить библиотеку jquery и jquery Draggable
  3. Далее необходимо только инициализировать плагин.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
.block{
width:100px;
height:100px;
background:silver;
}
</style>
<script>
$(document).ready(function() {
$('.block').draggable();
})
</script>
<div class="block"></div>

Запустив его на экране увидим серый квадрат который при клике на него поддается перетаскиванию. Вот так вот все просто с jquery.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?