С помощью jQuery UI Вы можете добавить элементам уникальные свойства поведения.

Методы взаимодействия

С помощью методов взаимодействия Вы можете создавать элементы, которые можно перетаскивать мышкой, которые могут изменять размер, которые можно сортировать и которые можно выделять мышкой.

Перетаскиваемые элементы

С помощью метода draggable Вы можете сделать выбранный элемент перетаскиваемым.

Синтаксис

$("селектор").draggable({опция1:значение1, опцияN:значениеN})

С помощью опций, которые передаются методу draggable Вы можете настраивать дополнительные аспекты поведения перетаскиваемых элементов.

Всем перетаскиваемым элементам назначается класс ui-draggable и дополнительно класс ui-draggable-dragging во время перетаскивания.

$(document).ready(function() {
   $("div").draggable();
});

С помощью опции axis Вы можете определить направление оси, по которой можно перетаскивать элемент.

$(document).ready(function() {
   $("#drag1").draggable({axis:"x"});
   $("#drag2").draggable({axis:"y"});
});

С помощью опции cursor Вы можете задать вид, который будет принимать указатель мыши во время перетаскивания элемента.

$(document).ready(function() {
   $("#drag1").draggable({cursor:"move"});
   $("#drag2").draggable({cursor:"help"});
});

С помощью опции helper Вы можете определить вид элемента-помощника. Элемент-помощник отображается во время перетаскивания элемента. По умолчанию во время перетаскивания отображается сам перетаскиваемый элемент.

$(document).ready(function() {
   $("#drag1").draggable({helper:"clone"});
   $("#drag2").draggable({helper:function(event){return $("<div>Я элемент 
   помощник.</div>")}});
});

Опция revert определяет будет ли элемент возвращаться на изначальную позицию после завершения перетаскивания.

$(document).ready(function() {
   $("#drag1").draggable({revert:true});
});

Области для перетаскиваемых элементов

С помощью метода droppable Вы можете определить область, в которую можно переместить перетаскиваемый элемент.

Синтаксис

$("селектор").droppable({опция1:значение1, опцияN:значениеN})

С помощью опций, которые передаются методу droppable Вы можете настраивать дополнительные аспекты поведения области для перетаскиваемых элементов.

Код функции переданный, в опции drop выполнится, когда перетаскиваемый элемент будет перетащен в область и отпущен.

Код функции переданный, в опции over выполнится, когда перетаскиваемый элемент будет заведен в границы области.

$(document).ready(function(){
   $("#drag1").draggable({stack:"#drop1"});
   $("#drop1").droppable({
      over:function(){
         $("#drag1").css("background-color","#d7fa99");
         $("#drop1").css("background-color","#d7fa99");
      },
      drop:function(){
         $("#drag1").css("display","none");
         $("#drop1").css("background-color","#c4f66f");
         $("#drop1").html("Перемещение завершено успешно.");
         alert("Вы перетащили элемент с id=drag1 в область с id=drop1.");
      }
   });
});

С помощью опции accept Вы можете указать элементы, которые будут приниматься областью.

$(document).ready(function(){
   $("#drag1").draggable({stack:"#drop1"});
   $("#drag2").draggable({stack:"#drop1",revert:true});
   $("#drop1").droppable({
      accept:"#drag1",
      over:function(){
         $("#drag1").css("background-color","#d7fa99");
         $("#drop1").css("background-color","#d7fa99");
      },
      drop:function(){
         $("#drag1").css("display","none");
         $("#drop1").css("background-color","#c4f66f");
         $("#drop1").html("Перемещение завершено успешно.");
      }
   });
});

Растягиваемые элементы

С помощью метода resizable Вы можете сделать элементы растягиваемыми.

Синтаксис

$("селектор").resizable({опция1:значение1, опцияN:значениеN})

С помощью опций, которые передаются методу resizable Вы можете настраивать дополнительные аспекты поведения растягиваемых элементов.

$(document).ready(function(){
   $("#resize1").resizable();
});

Если опция animate имеет значение true размер элемента будет изменятся анимировано.

С помощью опции helper Вы можете задать вид помощника, с помощью которого пользователь будет узнавать о текущем размере окна во время растягивания.

$(document).ready(function(){
   $("#resize1").resizable({animate:true,helper:"ui-state-highlight"});
});

Выделяемые элементы

С помощью метода selectable Вы можете превратить группу элементов в список выбора.

Синтаксис

$("селектор").selectable({опция1:значение1, опцияN:значениеN})

С помощью опций, которые передаются методу selectable Вы можете настраивать дополнительные аспекты поведения выделяемых элементов.

С помощью классов .ui-selecting и .ui-selected Вы можете настроить оформление выбираемых и выбранных элементы.

$(document).ready(function(){
   $("#select1").selectable();
});

Сортируемые элементы

С помощью метода sortable Вы можете сделать элементы списка сортируемыми.

Синтаксис

$("селектор").sortable({опция1:значение1, опцияN:значениеN})

С помощью опций, которые передаются методу sortable Вы можете настраивать дополнительные аспекты поведения сортируемых списков.

$(document).ready(function(){
   $("#sort1").sortable();
});

Вы можете связать два сортируемых списка. Элементы одного связанного списка можно перемещать в другой связанный список.

Для того, чтобы воспользоваться этой возможностью необходимо задать связываемым спискам одинаковый класс и указать его в опции connectWith.

$(document).ready(function(){
   $("#sort1,#sort2").sortable({connectWith:".connect"});
});

Обратите внимание: узнать больше о методах взаимодействия Вы можете в нашем jQuery UI справочнике.

Сделайте сами

Задание 1 реализуйте подпункты перечисленные ниже путем добавления на страницу соответствующего jQuery UI кода:

1. Сделайте элемент с id=el1 перетаскиваемым и растягиваемым.
2. Сделайте список с id=sort1 сортируемым и затем расставьте элементы этого списка в правильном порядке.
3. Сделайте элементы с id=el2 и id=el3 перетаскиваемыми. После этого сделайте так, чтобы первая область (c id=drop1) принимала оба элемента, а вторая (c id=drop2) только элемент с id=el3. После того, как элемент будет перетащен в принимающую его область перетаскиваемый элемент должен стать невидимым, а цвет фона области должен изменится на зеленый.

$(document).ready(function(){
//Пишите код здесь
});