JQuery UI пример - перетаскивание (Draggable)

Предыдущая: API JQuery UI - член подсказке окно (подсказке Widget)

Далее: пример JQuery UI - место (Droppable)

Разрешение мышь, чтобы переместить элемент.

Для получения более подробной информации о взаимодействии перетаскиваемом, обратитесь к документации по API можно перетащить виджеты (перетаскиваемую виджетов) .

По умолчанию функция

Включить функцию перемещаемой на любой DOM элемента. При нажатии и перемещение мыши в окне, чтобы переместить объект перемещаемой.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - функция по умолчанию </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable {ширина: 150px; высота: 150px; обивка: 0.5em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Пожалуйста, затащить меня! </ P>
</ Div>
 
 
</ Body>
</ HTML>

Автоматическая прокрутка

Автоматическая прокрутка документа, когда перетаскиваемыми перемещается за пределы окна просмотра. Установите scroll опцию верно , чтобы включить автоматическую прокрутку, тонкой настройки, скорость прокрутки при пролистывании триггера scrollSensitivity и scrollSpeed настройка параметров.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - Автоматическая прокрутка </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2, # draggable3 {ширина: 100px; высота: 100px; обивка: 0.5em; флоат: слева; поле: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Свиток: истинный});
    $ ( "# Draggable2") .draggable ({пролистайте: правда, scrollSensitivity: 100});
    $ ( "# Draggable3") .draggable ({пролистайте: правда, Scrollspeed: 100});
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Свиток устанавливается истина, настройка по умолчанию </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> scrollSensitivity 100 </ p>
</ Div>
 
<Div ID = "draggable3" класс = "UI-виджета-контента">
  <P> Scrollspeed 100 </ p>
</ Div>
 
<Div стиль = "высота: 5000px; ширина: 1px;"> </ DIV>
 
 
</ Body>
</ HTML>

Ограничено движение

Draggable область, которая определяется границей, чтобы ограничить движение каждого перетаскиваемыми. Установить axis опции для ограничения перемещаемой путь к оси х или оси у или containment параметр , чтобы указать родительский DOM элемент или селектор JQuery, такие как "документ"..

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - ограничено движение </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .draggable {ширина: 90px; высота: 90px; обивка: 0.5em; флоат: слева; маржа: 0 10px 10px 0;}
  #draggable, # draggable2 {краю дна: 20px;}
  #draggable {курсор: н-изменение размера;}
  # Draggable2 {курсор: е-изменение размера;}
  # Сдерживание-обертка {ширина: 95%; высота: 150px; границы: 2px твердый #ccc; обивка: 10px;}
  h3 {ясно: слева;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Ось: "у"});
    $ ( "# Draggable2") .draggable ({ось: "х"});
 
    $ ( "# Draggable3") .draggable ({сдерживание: "# сдерживание-обертку", пролистайте: ложь});
    $ ( "# Draggable5") .draggable ({сдерживание: "родитель"});
  });
  </ Script>
</ Head>
<Body>
 
<H3> движение вдоль оси ограничения: </ h3>
 
<Div ID = "перетаскиваемыми" класс = "перетаскиваемыми UI-виджет-контента">
  <P> только вертикальное сопротивление </ p>
</ Div>
 
<Div ID = "draggable2" класс = "перетаскиваемыми UI-виджет-контента">
  <P> Только горизонтальное сопротивление </ p>
</ Div>
 
<H3> или ограничено движение в другом DOM элемента: </ h3>
<Div ID = "сдерживание-обертка">
  <Div ID = "draggable3" класс = "перетаскиваемыми UI-виджет-контента">
    <P> Я был ограничен в коробке </ p>
  </ Div>
 
  <Div класс = "перетаскиваемыми UI-виджет-контента">
    <P ID = "draggable5" класс = "UI-виджет-заголовок"> Я был ограничен в пределах родительского элемента </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

Курсор Стиль

При перемещении объекта в позицию курсора. По умолчанию курсор находится в середине перемещаемого объекта. Используйте cursorAt опцию , чтобы указать положение относительно другого (указанного по отношению к верхней значения пикселя, справа, снизу, слева) перемещаемыми -х годов. Предоставляя действительное значение CSS курсор с помощью cursor опций для настройки внешнего вида курсора. Допустимые значения курсора CSS включают в себя: по умолчанию, перемещение, указатель, перекрестие, и так далее.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - Курсор Стиль </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2, # draggable3 {ширина: 100px; высота: 100px; обивка: 0.5em; флоат: слева; поле: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Курсор: "двигаться", cursorAt: {верх: 56, слева: 56}});
    $ ( "# Draggable2") .draggable ({курсор: "крестик", cursorAt: {верх: -5, слева: -5}});
    $ ( "# Draggable3") .draggable ({cursorAt: {снизу: 0}});
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Я всегда в середине (по отношению к мыши) </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> Мой курсор находится слева -5 и топ -5 </ p>
</ Div>
 
<Div ID = "draggable3" класс = "UI-виджета-контента">
  <P> Мои только управлять положением курсора 'снизу' значения </ p>
</ Div>
 
 
</ Body>
</ HTML>

Отложенный старт

По delay задержки миллисекунд начать перетаскивание значения параметров. По distance опции нажимается и перетащите курсор на указанный пиксель , прежде чем разрешить перетаскивание.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - отложенный старт </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2 {ширина: 120px; высота: 120px; обивка: 0.5em; флоат: слева; поле: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Расстояние: 20});
    $ ( "# Draggable2") .draggable ({задержка: 1000});
    $ ( ".ui-Draggable") .disableSelection ();
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Только тогда, когда я перетащить 20 пиксель, и начал таскать </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  После того, как <р> Независимо от того, какое расстояние нужно перетащить и перетащить стали ждать 1000ms </ p>
</ Div>
 
 
</ Body>
</ HTML>

событие

перетаскиваемости на start , drag и stop события. Перемещение запуска триггера start событие, запускается во время перетаскивания drag события, срабатывает , когда сопротивление стоп stop события.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - События </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable {ширина: 16em; обивка: 0 1em;}
  #draggable ул Li {поле: 1em 0; обивка: 0.5em 0;} * HTML #draggable уль Li {высота: 1%;}
  #draggable ул Ли span.ui-значок {поплавок: слева;}
  #draggable уль Li span.count {шрифта: жирный;}
  </ Style>
  <Script>
  $ (Function () {
    переменная $ start_counter = $ ( "# событие-старт"),
      $ Drag_counter = $ ( "# событий перетаскивания"),
      $ Stop_counter = $ ( "# событийно-стоп"),
      подсчитываются = [0, 0, 0];
 
    $ ( "#draggable") .draggable ({
      Старт: функция () {
        отсчеты [0] ++;
        updateCounterStatus ($ start_counter, подсчитывает [0]);
      },
      сопротивление: функция () {
        отсчеты [1] ++;
        updateCounterStatus ($ drag_counter, на счету [1]);
      },
      остановка: функция () {
        отсчеты [2] ++;
        updateCounterStatus ($ stop_counter, подсчитывает [2]);
      }
    });
 
    функционировать updateCounterStatus ($ event_counter, NEW_COUNT) {
      // Обновление первое визуальное состояние ...
      если (! $ event_counter.hasClass ( "Пользовательский интерфейс состояния при наведении курсора")) {
        $ Event_counter.addClass ( "Пользовательский интерфейс состояния при наведении курсора")
          . .siblings () RemoveClass ( "Пользовательский интерфейс состояния при наведении курсора");
      }
      // ... Затем обновите числа $ ( "span.count", $ event_counter) .text (NEW_COUNT);
    }
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджет UI-виджет-контента">
 
  <P> Пожалуйста, затащить меня, вызывая цепь событий. </ P>
 
  <Ul класс = "пользовательский интерфейс-хелперов-сброс">
    <Li ID = класс "событие-старт" = "щ-состоянии по умолчанию пользовательский интерфейс угла всех"> <SPAN класс = "UI-значок UI-значок-игра"> </ SPAN> "старт" называется <SPAN класс = "счетчик"> 0 </ SPAN> х </ li>
    <Li ID = класс "событие-перетащить" = "щ-состоянии по умолчанию пользовательский интерфейс угла всех"> <класс диапазон = "UI-значок UI-значок стрелка-4"> </ SPAN> "перетащить" называется <SPAN класс = "счетчик"> 0 </ SPAN> х </ li>
    <Li ID = "событие-стоп" класс = "Пользовательский интерфейс состояния по умолчанию пользовательский интерфейс угла всех"> <SPAN класс = "UI-значок UI-значок остановки"> </ SPAN> "стоп" называется <SPAN класс = "счетчик"> 0 </ SPAN> х </ li>
  </ UL>
</ Div>
 
 
</ Body>
</ HTML>

рукоятки

Разрешается только тогда, когда курсор части указано сопротивление на перетаскиваемыми. Используйте handle опцию , чтобы указать элемент (или группу элементов) селектора JQuery для перемещаемого объекта.

Или предотвратить перетаскивание, когда курсор находится над конкретным элементом (или группы элементов) в пределах перетаскиваемыми. Используйте опцию отменить, чтобы указать селектор JQuery над которой "отменить" перетаскиваемую функциональность.

Или, когда курсор указанный элемент (или группа элементов) в пределах допустимого сопротивления перетаскиваемом. Используйте handle опцию для задания отмены функции перетаскивания JQuery селектор.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - Рукоятки </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2 {ширина: 100px; высота: 100px; обивка: 0.5em; флоат: слева; поле: 0 10px 10px 0;}
  #draggable р {Курсор: движение;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Ручка: "р"});
    $ ( "# Draggable2") .draggable ({отменить: "p.ui-виджет-заголовок"});
    $ ( "Див, р") .disableSelection ();
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P класс = "UI-виджет-заголовок"> Вы можете только перетащить в пределах этого диапазона I </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> Вы можете взять меня вокруг, чтобы перетащить & hellip; </ p>
  <P класс = "UI-виджет-заголовок"> & hellip; но вы не можете перетащить меня </ p> В этом диапазоне
</ Div>
 
 
</ Body>
</ HTML>

Восстановление местоположения

Как и логические значения revert при перетаскиваемыми опции , чтобы остановить перетаскивание, вернуть перетаскиваемыми (или его помощник) в исходное местоположение.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - Восстановление Расположение </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2 {ширина: 100px; высота: 100px; обивка: 0.5em; флоат: слева; поле: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Откат: истинно});
    $ ( "# Draggable2") .draggable ({вернуться: истинный, помощник: "клон"});
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Восстановление </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> Восстановление Assistant </ p>
</ Div>
 
 
</ Body>
</ HTML>

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

Совместите перетаскиваемые внутренние или внешние элементы границы DOM. Использование snap , snapMode (внутренний, внешний, оба) и snapTolerance (при вызове в соответствие с перетаскиваемом расстояния между элементами в пикселях) опции.

Выровнять по сетке или перетаскиваемыми. По grid вариант размера для установки ячеек сетки ( в пикселях высоту или ширину).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - Выровнять элементы сетки или </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .draggable {ширина: 90px; высота: 80px; обивка: 5px; флоат: слева; поле: 0 10px 10px 0; размер шрифта: .9em;}
  .ui-виджет-заголовок р, .ui-виджет-контента р {маржа: 0;}
  #snaptarget {высота: 140px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Привязать: истинно});
    $ ( "# Draggable2") .draggable ({оснастке: ".ui-виджет-заголовок"});
    $ ( "# Draggable3") .draggable ({оснастке: ".ui-виджет-заголовок", SNAPMODE: "внешний"});
    $ ( "# Draggable4") .draggable ({сетки: [20, 20]});
    $ ( "# Draggable5") .draggable ({сетки: [80, 80]});
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "snaptarget" класс = "UI-виджет-заголовок">
  <P> Я цель выровненных </ p>
</ Div>
 
<br style="clear:both">
 
<Div ID = "перетаскиваемыми" класс = "перетаскиваемыми UI-виджет-контента">
  <P> По умолчанию (SNAP: истина), выравнивание по всем другим перетаскиваемом элементу </ p>
</ Div>
 
<Div ID = "draggable2" класс = "перетаскиваемыми UI-виджет-контента">
  <P> Я просто выравниваются по большой коробке </ p>
</ Div>
 
<Div ID = "draggable3" класс = "перетаскиваемыми UI-виджет-контента">
  <P> Я просто выровнен по внешнему краю большого ящика </ p>
</ Div>
 
<Div ID = "draggable4" класс = "перетаскиваемыми UI-виджет-контента">
  <P> Я выравниваются к 20 х 20 сетки </ p>
</ Div>
 
<Div ID = "draggable5" класс = "перетаскиваемыми UI-виджет-контента">
  <P> Я выравниваются по сетке 80 х 80 </ p>
</ Div>
 
 
</ Body>
</ HTML>

Визуальная обратная связь

Обеспечить обратную связь с пользователем, в качестве помощника пути тащили объектов. helper параметр принимает значения 'оригинал' (с курсором перемещаемыми объектами), 'клон' (с курсором перетаскиваемом копию), либо функция возвращает элемент DOM (элемент во время перетащите курсор вокруг дисплея). По opacity опция контролирует помощник прозрачности.

Для того, чтобы различать, какой является перетаскиваемыми тащится, пусть перетаскиваемыми в движении, чтобы держать фронт. Если вы тянете, используя zIndex опцию , чтобы установить высоту помощника Z-индекс, или использовать stack опцию , чтобы убедиться , что , когда вы прекратите перетаскивание, последний из которых тащили деталь всегда отображается в верхней части группы с другими проектами.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) - визуальная обратная связь </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2, # draggable3, #set DIV {ширина: 90px; высота: 90px; обивка: 0.5em; флоат: слева; поле: 0 10px 10px 0;}
  #draggable, # draggable2, # draggable3 {краю дна: 20px;}
  #set {ясно: как, с плавающей точкой: слева; ширина: 368px, высота: 120px;}
  р {ясно: как; маржа: 0; обивка: 1em 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Helper: "оригинал"});
    $ ( "# Draggable2") .draggable ({непрозрачности: 0.7, помощник: "клон"});
    $ ( "# Draggable3") .draggable ({
      Курсор: "двигаться",
      cursorAt: {верх: -12, слева: -20},
      помощник: функция (событие) {
        вернуть $ ( "<DIV класс = 'UI-виджет-заголовок'> Я пользовательский помощник </ DIV>");
      }
    });
    $ ( "#set Див") .draggable ({стек: "#set DIV"});
  });
  </ Script>
</ Head>
<Body>
 
<H3 класс = "Docs"> помощник: </ h3>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> оригинал </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> полупрозрачный клон </ p>
</ Div>
 
<Div ID = "draggable3" класс = "UI-виджета-контента">
  <P> Пользовательский помощник (в сочетании с cursorAt) </ p>
</ Div>
 
<H3 класс = "Docs"> стек: </ h3>
<Div ID = "набор">
  <Div класс = "UI-виджета-контента">
    <P> Мы draggables .. </ p>
  </ Div>
 
  <Div класс = "UI-виджета-контента">
    <P> .. это г-индекс автоматически управляется .. </ p>
  </ Div>
 
  <Div класс = "UI-виджета-контента">
    <P> .. с вариантами стека. </ P>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

JQuery UI Draggable + Сортируемый

Draggable и Сортируемый бесшовных взаимодействия.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI перетаскивания (Draggable) + Сортировка (Сортируемый) </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  уль {список стиле типа: нет; маржа: 0; утеплитель: 0; краю дна: 10px;}
  Li {поле: 5px; обивка: 5px; ширина: 150px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#sortable") .sortable ({
      вернуться: правда
    });
    $ ( "#draggable") .draggable ({
      connectToSortable: "#sortable",
      помощник: "клон",
      вернуться: "недействительные"
    });
    $ ( "Уль, Ли") .disableSelection ();
  });
  </ Script>
</ Head>
<Body>
 
<Ul>
  <Li ID = "перетаскиваемыми" класс = "Пользовательский интерфейс-состояние-изюминка"> Пожалуйста, затащить меня </ li>
</ UL>
 
<Ul ID = "сортировкой">
  <Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
  <Li класс = "UI-состоянии по умолчанию"> Пункт 2 </ li>
  <Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
  <Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
  <Li класс = "UI-состоянии по умолчанию"> Пункт 5 </ li>
</ UL>
 
 
</ Body>
</ HTML>