Пример JQuery UI - место (Droppable)

Предыдущий: Пример JQuery UI - перетаскивание (Draggable)

Далее: экземпляр JQuery UI - Увеличение (Resizable)

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

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

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

Включение функции Droppable на любой DOM элемента, и может перетаскивать виджеты для создания цели.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - функция по умолчанию </ 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 {ширина: 100px; высота: 100px; обивка: 0.5em; флоат: слева; поле: 10px 10px 10px 0;}
  #droppable {ширина: 150px; высота: 150px; обивка: 0.5em; флоат: слева; поле: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "р")
            .html ( "брошено!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Пожалуйста, пришлите мне тащили на место назначения! </ P>
</ Div>
 
<Div ID = "Droppable" класс = "UI-виджет-заголовок">
  <P> Хранить здесь! </ P>
</ Div>
 
 
</ Body>
</ HTML>

Принято

Используйте accept параметры таргетинга Droppable элемент , который принимает (или группу элементов).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - принят </ 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>
  #droppable {ширина: 150px; высота: 150px; обивка: 0.5em; флоат: слева; поле: 10px;}
  #draggable, # перетаскиваемыми-nonvalid {ширина: 100px; высота: 100px; обивка: 0.5em; флоат: слева; поле: 10px 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable, # Draggable-nonvalid") .draggable ();
    $ ( "#droppable") .droppable ({
      принимаем: "#draggable",
      activeClass: "Пользовательский интерфейс состояния при наведении курсора",
      hoverClass: "Пользовательский интерфейс государство-активный»,
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "р")
            .html ( "брошено!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми-nonvalid" класс = "UI-виджета-контента">
  <P> Я не могу быть помещен перетаскиваемыми </ p>
</ Div>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Пожалуйста, затащить меня к месту назначения </ p>
</ Div>
 
<Div ID = "Droppable" класс = "UI-виджет-заголовок">
  <P> принять: '#draggable' </ p>
</ Div>
 
 
</ Body>
</ HTML>

Предотвращение распространения

При использовании вложенного Droppable - например, вы можете иметь древовидную структуру каталогов для редактирования с папками и узлов документа - greedy опция установлена верно , когда перетаскиваемыми для предотвращения размещения на дочерних узлов (Droppable) , когда распространение событий.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - предотвратить распространение </ 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 {ширина: 100px; высота: 40px; обивка: 0.5em; флоат: слева; поле: 10px 10px 10px 0;}
  #droppable, # droppable2 {ширина: 230px; высота: 120px; обивка: 0.5em; флоат: слева; поле: 10px;}
  # Droppable-внутренний, # droppable2-внутренняя {ширина: 170 пикселей, высота: 60px; обивка: 0.5em; флоат: слева; поле: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
 
    $ ( "#droppable, # Droppable-внутренний") .droppable ({
      activeClass: "Пользовательский интерфейс состояния при наведении курсора",
      hoverClass: "Пользовательский интерфейс государство-активный»,
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "> р")
            .html ( "брошено!");
        возвращение ложным;
      }
    });
 
    $ ( "# Droppable2, # droppable2-внутренний") .droppable ({
      жадные: правда,
      activeClass: "Пользовательский интерфейс состояния при наведении курсора",
      hoverClass: "Пользовательский интерфейс государство-активный»,
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "> р")
            .html ( "брошено!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Пожалуйста, затащить меня к месту назначения </ p>
</ Div>
 
<Div ID = "Droppable" класс = "UI-виджет-заголовок">
  <P> Внешний Droppable </ p>
  <Div ID = "Droppable-внутренний" класс = "UI-виджет-заголовок">
    <P> Внутренний Droppable (без жадный) </ p>
  </ Div>
</ Div>
 
<Div ID = "droppable2" класс = "UI-виджет-заголовок">
  <P> Внешний Droppable </ p>
  <Div ID = "droppable2-внутренний" класс = "UI-виджет-заголовок">
    <P> Внутренний Droppable (с жадным) </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

Восстановление перемещаемой местоположение

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - уменьшение перетаскиваемыми положение </ 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; флоат: слева; поле: 10px 10px 10px 0;}
  #droppable {ширина: 150px; высота: 150px; обивка: 0.5em; флоат: слева; поле: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Откат: "действителен"});
    $ ( "# Draggable2") .draggable ({вернуться: "недействительные"});
 
    $ ( "#droppable") .droppable ({
      activeClass: "Пользовательский интерфейс состояния по умолчанию",
      hoverClass: "Пользовательский интерфейс состояния при наведении курсора",
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "р")
            .html ( "помещается!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> сокращение при размещении на цели </ p>
</ Div>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> Когда восстановление не помещается на мишень </ p>
</ Div>
 
<Div ID = "Droppable" класс = "UI-виджет-заголовок">
  <P> Пожалуйста, поставьте здесь </ p>
</ Div>
 
 
</ Body>
</ HTML>

Корзина Демо-версия

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - Корзина Demo </ 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>
  h1 {утеплитель: .2em; маржа: 0;}
  #products {поплавок: слева; ширина: 500px; Маржа правый: 2em;}
  #cart {ширина: 200px; флоат: слева; Верхнее поле: 1em;}
  / * Определить список стилей, чтобы максимизировать Droppable * /
  #cart ола {маржа: 0; обивка: 1em 0 1em 3em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#catalog") .accordion ();
    $ ( "#catalog Ли") .draggable ({
      appendTo: "тело",
      помощник: "клон"
    });
    $ ( "#cart Ol") .droppable ({
      activeClass: "Пользовательский интерфейс состояния по умолчанию",
      hoverClass: "Пользовательский интерфейс состояния при наведении курсора",
      принимаем: ": нет (.ui-сортируемым-хелперов)",
      падение: функцию (событие, Ui) {
        $ (Это) .find ( ".placeholder") .remove ();
        $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (это);
      }
    }). Сортируемый ({
      пункты: "Ли: нет (.placeholder)",
      сортировка: функция () {
        // Получить Droppable взаимодействия с сортируемого добавленной записи // использовать connectWithSortable может решить эту проблему, но не позволяет вам настроить активный / hoverClass опции $ (это) .removeClass ( "UI-состоянии по умолчанию");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<DIV ID = "продукты">
  <H1 класс = "UI-виджет-заголовок"> Продукция </ h1>
  <Div ID = "каталог">
    <H2> <a href="#"> футболки </a> </ h2>
    <Div>
      <Ul>
        <Li> Lolcat рубашка </ li>
        <Li> Cheezeburger рубашка </ li>
        <Li> Buckit рубашка </ li>
      </ UL>
    </ Div>
    <H2> <a href="#"> Сумки </a> </ h2>
    <Div>
      <Ul>
        <Li> Zebra Полосатый </ li>
        <Li> Черная кожа </ li>
        <Li> Аллигатор кожа </ li>
      </ UL>
    </ Div>
    <H2> <a href="#"> Гаджеты </a> </ h2>
    <Div>
      <Ul>
        <Li> iPhone </ li>
        <Li> IPOD </ li>
        <Li> IPad </ li>
      </ UL>
    </ Div>
  </ Div>
</ Div>
 
<Div ID = "корзина">
  <H1 класс = "UI-виджет-заголовок"> корзина </ h1>
  <Div класс = "UI-виджета-контента">
    <Ol>
      <Li класс = "заполнитель"> добавить продукты здесь </ li>
    </ Ol>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

Простой Photo Manager

Вы можете перетащить и поместить фотографии в корзины или нажмите на значок корзины, чтобы удалить фотографии.

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

Вы можете изменить масштаб изображения, нажав на иконку, чтобы увидеть увеличенное изображение. JQuery UI Dialog (диалог) средство для модального окна.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - простой менеджер фотографий </ 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>
  #gallery {поплавок: слева; ширина: 65%; мин-высота: 12em;}
  .gallery.custom состояния активных {фон: #eee;}
  .gallery Li {поплавок: слева; ширина: 96 пикселей; отступы: 0.4em; маржа: 0 0.4em 0.4em 0; выравнивания текста: центр;}
  .gallery Ли h5 {маржа: 0 0 0.4em; курсор: перемещение;}
  .gallery Ли а {поплавок: право;}
  .gallery Ли a.ui-значок-ZoomIn {поплавок: слева;}
  .gallery Li IMG {ширина: 100%; курсор: перемещение;}
 
  #trash {поплавок: справа; ширина: 32%; мин-высота: 18em; обивка: 1%;}
  #trash h4 {высота строки: 16px; маржа: 0 0 0.4em;}
  #trash h4 .ui-значок {поплавок: слева;}
  не #trash .gallery h5 {дисплей: нет;}
  </ Style>
  <Script>
  $ (Function () {
    // Вы находитесь в альбоме и мусор переменная $ галерея = $ ( "#gallery"),
      $ Trash = $ ( "#trash");
 
    // Сделать запись альбома перемещаемой $ ( "Ли", $ галерея) .draggable ({
      отменить: "a.ui-значок", // нажмите на значок не начнет тянуть вернуться: "недействительные", // Когда неразмещёнными, запись вернется в исходное положение сдерживания: "документ",
      помощник: "клон",
      Курсор: "двигаться"
    });
 
    // Пусть мусор может быть помещен, принял запись альбома $ trash.droppable ({
      принимаем: "#gallery> Ли",
      activeClass: "Пользовательский интерфейс-состояние-изюминкой»,
      падение: функцию (событие, Ui) {
        deleteImage (ui.draggable);
      }
    });
 
    // Сделать альбом можно поместить, принял корзины запись $ gallery.droppable ({
      принимаем: "#trash Ли",
      activeClass: «заказных государственно-активный»,
      падение: функцию (событие, Ui) {
        recycleImage (ui.draggable);
      }
    });
 
    // Изображение функция удаления VAR recycle_icon = "<A HREF =" ссылка / к / утилизация / скрипт / когда / мы / есть / JS / выкл "название = 'восстановленное изображение' класс = 'Пользовательский интерфейс-значок UI-значок-обновления' > восстановления изображения </a> ";
    Функция deleteImage ($ пункт) {
      $ Item.fadeOut (функция () {
        переменная $ список = $ ( "уль", $ мусора) .Length?
          $ ( "Уль", $ мусора):
          $ ( "<Ul класс = 'галерея UI-хелперов-сброс" /> ") .appendTo ($ мусора);
 
        $ Item.find ( "a.ui-икона-мусор") .remove ();
        $ Item.append (recycle_icon) .appendTo ($ список) .fadeIn (функция () {
          $ Пункт
            .animate ({ширина: "48px"})
            .find ( "IMG")
              .animate ({высота: "36px"});
        });
      });
    }
 
    // Image Restore trash_icon Var = "<A HREF =" ссылка / к / мусор / скрипт / когда / мы / есть / JS / выкл "название =" Удалить изображение "класс =" UI-значок UI-значок-мусор " > удалить изображение </a> ";
    Функция recycleImage ($ пункт) {
      $ Item.fadeOut (функция () {
        $ Пункт
          .find ( "a.ui-значок-обновления")
            .remove ()
          .end ()
          .css ( "ширина", "96 пикселей")
          .append (trash_icon)
          .find ( "IMG")
            .css ( "высота", "72px")
          .end ()
          .appendTo ($ галерея)
          .fadeIn ();
      });
    }
 
    // Функция предварительного просмотра изображения, Demos ui.dialog используется в качестве модальных оконной функции viewLargerImage ($ ссылка) {
      переменная SRC = $ link.attr ( "HREF"),
        название = $ link.siblings ( "IMG") .attr ( "Alt"),
        $ Режимное = $ ( "IMG [SRC $ = '" + + SRC "']");
 
      если ($ modal.length) {
        $ Modal.dialog ( "открытый");
      } Else {
        вар IMG = $ ( "<IMG Alt = '" + название + "ширина =" 384 "высота =" 288 "стиль =" дисплей: нет; обивка: 8px;' /> ")
          .attr ( "ЦСИ", ЦСИ) .appendTo ( "тело");
        setTimeout (функция () {
          img.dialog ({
            Название: название,
            ширина: 400,
            модальный: правда
          });
        }, 1);
      }
    }
 
    // Proxy значок решения поведение $ ( "ul.gallery> Li") через событие .click (функция (событие) {
      переменная $ пункт = $ (это),
        $ Target = $ (event.target);
 
      если ($ target.is ( "a.ui-икона-мусор")) {
        deleteImage ($ пункт);
      } Иначе, если ($ target.is ( "a.ui-икона-ZoomIn")) {
        viewLargerImage ($ мишень);
      } Иначе, если ($ target.is ( "a.ui-значок-обновления")) {
        recycleImage ($ пункт);
      }
 
      возвращение ложным;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div класс = "UI-виджет UI-хелперов-clearfix">
 
<Ul ID = "галерея" класс = "галерея UI-хелперов сброса пользовательский интерфейс-хелперов-clearfix">
  <Li класс = "UI-виджета-контента UI-угол-тр">
    <H5 класс = "UI-виджет-заголовок"> Высокие Татры </ h5>
    <Img SRC = "../ сор-содержание / добавления / 2014/03 / high_tatras_min.jpg" Alt = "Высокие Татры пик" ширина = "96" высота = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Просмотреть увеличенную </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> удалить изображения </a>
  </ Li>
  <Li класс = "UI-виджета-контента UI-угол-тр">
    <H5 класс = "UI-виджет-заголовок"> Высокие Татры 2 </ h5>
    <Img SRC = "../ сор-содержание / добавления / 2014/03 / high_tatras2_min.jpg" Alt = "Green Lake Mountain Cabin" ширина = "96" высота = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Просмотреть увеличенную </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> удалить изображения </a>
  </ Li>
  <Li класс = "UI-виджета-контента UI-угол-тр">
    <H5 класс = "UI-виджет-заголовок"> Высокие Татры 3 </ h5>
    <Img SRC = "../ сор-содержание / добавления / 2014/03 / high_tatras3_min.jpg" Alt = "План Climbing" ширина = "96" высота = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Просмотреть увеличенную </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> удалить изображения </a>
  </ Li>
  <Li класс = "UI-виджета-контента UI-угол-тр">
    <H5 класс = "UI-виджет-заголовок"> Высокие Татры 4 </ h5>
    <Img SRC = "../ сор-содержание / добавления / 2014/03 / high_tatras4_min.jpg" Alt = "в верхней части Козий Копка" ширина = высота "96" = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Просмотреть увеличенную </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> удалить изображения </a>
  </ Li>
</ UL>
 
<Div ID = "мусор" класс = "UI-виджета-контента UI-состоянии по умолчанию">
  <H4 класс = "UI-виджет-заголовок"> <SPAN класс = "UI-значок UI-значок-мусор"> Корзина </ SPAN> Корзина </ h4>
</ Div>
 
</ Div>
 
 
</ Body>
</ HTML>

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

При наведении курсора Droppable, или когда Droppable активируется (т.е. приемлемый перетаскиваемыми помещается на Droppable) при изменении Droppable внешний вид. Используйте hoverClass или activeClass опцию , чтобы указать класс, соответственно.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI место (Droppable) - визуальная обратная связь </ 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 {ширина: 90px; высота: 90px; обивка: 0.5em; флоат: слева; поле: 10px 10px 10px 0;}
  #droppable, # droppable2 {ширина: 120px; высота: 120px; обивка: 0.5em; флоат: слева; поле: 10px;}
  h3 {ясно: слева;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      hoverClass: "Пользовательский интерфейс состояния при наведении курсора",
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "р")
            .html ( "брошено!");
      }
    });
 
    $ ( "# Draggable2") .draggable ();
    $ ( "# Droppable2") .droppable ({
      принимаем: "# draggable2",
      activeClass: "Пользовательский интерфейс состояния по умолчанию",
      падение: функцию (событие, Ui) {
        $ (Это)
          .addClass ( "Пользовательский интерфейс-состояние-изюминка")
          .find ( "р")
            .html ( "брошено!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<H3> При наведении курсора Droppable, когда обратная связь: </ h3>
 
<Div ID = "перетаскиваемыми" класс = "UI-виджета-контента">
  <P> Пожалуйста, затащить меня к месту назначения </ p>
</ Div>
 
<Div ID = "Droppable" класс = "UI-виджет-заголовок">
  <P> Пожалуйста, поставьте здесь </ p>
</ Div>
 
<H3> При активации перемещаемой обратной связи: </ h3>
 
<Div ID = "draggable2" класс = "UI-виджета-контента">
  <P> Пожалуйста, затащить меня к месту назначения </ p>
</ Div>
 
<Div ID = "droppable2" класс = "UI-виджет-заголовок">
  <P> Пожалуйста, поставьте здесь </ p>
</ Div>
 
 
</ Body>
</ HTML>

Предыдущий: Пример JQuery UI - перетаскивание (Draggable)

Далее: экземпляр JQuery UI - Увеличение (Resizable)

jQuery UI курс

jQuery UI тема

jQuery UI Библиотека компонентов

jQuery UI справочное руководство

jQuery UI примеров