Учебники

JqueryUI – Краткое руководство

JqueryUI – Обзор

JqueryUI – это мощная библиотека Javascript, созданная поверх JavaScript-библиотеки jQuery. Пользовательский интерфейс расшифровывается как пользовательский интерфейс. Это набор плагинов для jQuery, который добавляет новые функциональные возможности в базовую библиотеку jQuery.

Набор плагинов в JqueryUI включает в себя взаимодействие с интерфейсом, эффекты, анимацию, виджеты и темы, построенные на основе библиотеки JavaScript jQuery.

Он был выпущен в сентябре 2007 года, о чем было объявлено в блоге Джона Резига на jquery.com. Последний выпуск, 1.10.4, требует jQuery 1.6 или более поздней версии. jQuery UI – это бесплатное программное обеспечение с открытым исходным кодом, лицензированное по лицензии MIT.

Характеристики

JqueryUI разделен на четыре группы: взаимодействия, виджеты, эффекты, утилиты. Они будут подробно обсуждаться в следующих главах. Структура библиотеки, как показано на рисунке ниже –

JQuery UI Cartegory

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

  • Виджеты – Используя виджеты, которые являются плагинами jQuery, вы можете создавать элементы пользовательского интерфейса, такие как accordian, datepicker и т. Д.

  • Эффекты – они построены на внутренних эффектах jQuery. Они содержат полный набор пользовательских анимаций и переходов для элементов DOM.

  • Утилиты – это набор модульных инструментов, которые библиотека JqueryUI использует внутри.

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

Виджеты – Используя виджеты, которые являются плагинами jQuery, вы можете создавать элементы пользовательского интерфейса, такие как accordian, datepicker и т. Д.

Эффекты – они построены на внутренних эффектах jQuery. Они содержат полный набор пользовательских анимаций и переходов для элементов DOM.

Утилиты – это набор модульных инструментов, которые библиотека JqueryUI использует внутри.

Преимущества JqueryUI

Ниже приведены некоторые из преимуществ Jquery UI –

  • Связные и последовательные API.
  • Комплексная поддержка браузера.
  • Открытый исходный код и бесплатное использование.
  • Хорошая Документация.
  • Мощный тематический механизм.
  • Стабильный и удобный для обслуживания.

JqueryUI – Настройка среды

В этой главе будет рассказано о загрузке и настройке библиотеки JqueryUI. Мы также кратко изучим структуру каталога и его содержание. Библиотеку JqueryUI можно использовать двумя способами на вашей веб-странице:

Загрузка библиотеки пользовательского интерфейса с официального сайта

Загрузка библиотеки пользовательского интерфейса из CDN

Скачать UI Library с ее официального сайта

Когда вы откроете ссылку http://jqueryui.com/ , вы увидите, что есть три варианта загрузки библиотеки JqueryUI –

Страница загрузки JqueryUI

  • Выборочная загрузка – нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.

  • Стабильный – Нажмите эту кнопку, чтобы получить стабильную и последнюю версию библиотеки JqueryUI.

  • Legacy – нажмите на эту кнопку, чтобы получить предыдущий основной выпуск библиотеки JqueryUI.

Выборочная загрузка – нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.

Стабильный – Нажмите эту кнопку, чтобы получить стабильную и последнюю версию библиотеки JqueryUI.

Legacy – нажмите на эту кнопку, чтобы получить предыдущий основной выпуск библиотеки JqueryUI.

Пользовательская загрузка с Download Builder

Используя Download Builder, вы можете создать собственную сборку, включающую только те части библиотеки, которые вам нужны. Вы можете скачать новую настроенную версию JqueryUI в зависимости от выбранной темы. Вы увидите следующий экран (та же страница разделена на два изображения) –

JQueryUI Custom Download Page

Это полезно, когда вам требуются только определенные плагины или функции библиотеки JqueryUI. Структура каталогов этой версии показана на следующем рисунке –

Страница пользовательской структуры каталогов JqueryUI

Несжатые файлы находятся в каталоге комплекта разработки . Несжатый файл лучше всего использовать во время разработки или отладки; сжатый файл экономит полосу пропускания и повышает производительность на производстве.

Стабильная загрузка

Нажмите кнопку «Стабильный», которая приведет непосредственно к ZIP-файлу, содержащему источники, примеры и документацию для последней версии библиотеки JqueryUI. Извлеките содержимое файла ZIP в каталог jqueryui .

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

Legacy скачать

Нажмите на кнопку Legacy, которая приведет непосредственно к ZIP-файлу предыдущего основного выпуска библиотеки JqueryUI. Эта версия также содержит все файлы, включая все зависимости, большую коллекцию демонстраций и даже набор модульных тестов библиотеки. Эта версия полезна для начала.

Скачать UI Library из CDNs

CDN или Сеть доставки контента – это сеть серверов, предназначенная для обслуживания файлов пользователям. Если вы используете ссылку CDN на своей веб-странице, она переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию JqueryUI из того же CDN, ее не нужно будет повторно загружать.

JQuery Foundation , Google и Microsoft предоставляют CDN, на которых размещается ядро ​​jQuery, а также пользовательский интерфейс jQuery.

Поскольку CDN не требует от вас размещения собственной версии jQuery и jQuery UI, он идеально подходит для демонстраций и экспериментов.

В этом руководстве мы используем версии библиотеки CDN.

пример

Теперь давайте напишем простой пример с использованием JqueryUI. Давайте создадим HTML-файл, скопируем следующее содержимое в тег <head> –

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Подробности приведенного выше кода –

  • В первой строке добавлена ​​тема пользовательского интерфейса jQuery (в нашем случае ui-lightness ) через CSS. Этот CSS сделает наш интерфейс стильным.

  • Во второй строке добавлена ​​библиотека jQuery, поскольку пользовательский интерфейс jQuery построен поверх библиотеки jQuery.

  • Третья строка добавляет библиотеку пользовательского интерфейса jQuery. Это позволяет jQuery UI на вашей странице.

В первой строке добавлена ​​тема пользовательского интерфейса jQuery (в нашем случае ui-lightness ) через CSS. Этот CSS сделает наш интерфейс стильным.

Во второй строке добавлена ​​библиотека jQuery, поскольку пользовательский интерфейс jQuery построен поверх библиотеки jQuery.

Третья строка добавляет библиотеку пользовательского интерфейса jQuery. Это позволяет jQuery UI на вашей странице.

Теперь давайте добавим немного контента в тег <head> –

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

В <body> добавьте это –

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

Полный HTML-код выглядит следующим образом. Сохраните его как myfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

Откройте вышеуказанную страницу в вашем браузере. Это произведет следующий экран.

Пример демонстрации кулака в JqueryUI

JqueryUI – Draggable

jQueryUI предоставляет метод draggable (), чтобы сделать любой элемент DOM перетаскиваемым. Как только элемент перетаскивается, вы можете переместить этот элемент, щелкнув по нему мышью и перетащив его в любое место в области просмотра.

Синтаксис

Метод draggable () можно использовать в двух формах:

Метод $ (селектор, контекст) .draggable (параметры)

Метод $ (селектор, контекст) .draggable («действие», [параметры])

Метод $ (селектор, контекст) .draggable (параметры)

Метод draggable (options) объявляет, что HTML-элемент может быть перемещен на HTML-странице. Параметр options – это объект, который определяет поведение задействованных элементов.

Синтаксис

$(selector, context).draggable(options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).draggable({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом –

Sr.No. Вариант и описание
1 addClasses

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно true .

Опция – addClasses

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно true .

Синтаксис

$(".selector").draggable(
   { addClasses: false }
);
2 добавить в

Определяет элемент, к которому должен быть добавлен перетаскиваемый помощник при перетаскивании. По умолчанию его значением является «родитель».

Вариант – appendTo

Определяет элемент, к которому должен быть добавлен перетаскиваемый помощник при перетаскивании. По умолчанию его значением является «родитель».

Синтаксис

$(".selector").draggable(
   { appendTo: "body"}
);
3 ось

Этот параметр ограничивает перетаскивание по горизонтальной (x) или вертикальной (y) оси. Возможные значения: «х», «у».

Опция – ось

Этот параметр ограничивает перетаскивание по горизонтальной (x) или вертикальной (y) оси. Возможные значения: «х», «у».

Синтаксис

$(".selector").draggable(
   { axis: "x" }
);
4 отменить

Вы можете использовать эту опцию, чтобы предотвратить запуск перетаскивания на указанных элементах. По умолчанию его значение равно «input, textarea, button, select, option».

Опция – отменить

Вы можете использовать эту опцию, чтобы предотвратить запуск перетаскивания на указанных элементах. По умолчанию его значение равно «input, textarea, button, select, option»

Синтаксис

$(".selector").draggable(
   { cancel: ".title" }
);
5 connectToSortable

Вы можете использовать эту опцию, чтобы указать список, элементы которого являются взаимозаменяемыми. В конце размещения элемент является частью списка. По умолчанию его значение равно «ложь».

Опция – connectToSortable

Вы можете использовать эту опцию, чтобы указать список, элементы которого являются взаимозаменяемыми. В конце размещения элемент является частью списка. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);
6 политика сдерживания

Ограничивает перетаскивание в пределах указанного элемента или региона. По умолчанию его значение равно «ложь».

Вариант – сдерживание

Ограничивает перетаскивание в пределах указанного элемента или региона. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { containment: "parent" }
);
7 курсор

Определяет CSS-свойство курсора при перемещении элемента. Он представляет форму указателя мыши. По умолчанию его значение равно «auto».

Опция – курсор

Определяет CSS-свойство курсора при перемещении элемента. Он представляет форму указателя мыши. По умолчанию его значение равно «auto». Другие возможные значения –

  • “перекрестие” (поперек)
  • «по умолчанию» (стрелка)
  • «указатель» (рука)
  • «двигаться» (две стрелки пересекаются)
  • «e-resize» (развернуть вправо)
  • “ne-resize” (развернуть вверх вправо)
  • “nw-resize” (развернуть вверх влево)
  • “n-resize” (развернуть вверх)
  • “se-resize” (развернуть вниз вправо)
  • “sw-resize” (развернуть вниз влево)
  • “s-resize” (развернуть вниз)
  • “авто” (по умолчанию)
  • “w-resize” (развернуть влево)
  • «текст» (указатель для записи текста)
  • “ждать” (песочные часы)
  • «помощь» (указатель помощи)

Синтаксис

$(".selector").draggable(
   { cursor: "crosshair" }
);
8 cursorAt

Устанавливает смещение помощника перетаскивания относительно курсора мыши. Координаты могут быть заданы в виде хэша, используя комбинацию из одной или двух клавиш: {сверху, слева, справа, снизу}. По умолчанию его значение равно «ложь».

Опция – курсор

Устанавливает смещение помощника перетаскивания относительно курсора мыши. Координаты могут быть заданы в виде хэша, используя комбинацию из одной или двух клавиш: {сверху, слева, справа, снизу}. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   $( ".selector" ).draggable({ cursorAt: { left: 5 } });
);
9 задержка

Задержка в миллисекундах, после которой учитывается первое движение мыши. Смещение может начаться после этого времени. По умолчанию его значение равно «0».

Опция – задержка

Задержка в миллисекундах, после которой учитывается первое движение мыши. Смещение может начаться после этого времени. По умолчанию его значение равно «0».

Синтаксис

$(".selector").draggable(
   { delay: 300 }
);
10 отключен

При значении true отключает возможность перемещения предметов. Элементы не могут быть перемещены до тех пор, пока эта функция не будет включена (с помощью команды перетаскивания («включить»)). По умолчанию его значение равно «ложь».

Опция – отключена

При значении true отключает возможность перемещения предметов. Элементы не могут быть перемещены до тех пор, пока эта функция не будет включена (с помощью команды перетаскивания («включить»)). По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { disabled: true }
);
11 расстояние

Количество пикселей, на которое должна быть перемещена мышь, прежде чем смещение будет учтено. По умолчанию его значение равно «1».

Вариант – расстояние

Количество пикселей, на которое должна быть перемещена мышь, прежде чем смещение будет учтено. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { distance: 10 }
);
12 сетка

Привязывает помощника перетаскивания к сетке, каждые x и y пикселей. Массив должен иметь форму [x, y]. По умолчанию его значение равно «ложь».

Опция – сетка

Привязывает помощника перетаскивания к сетке, каждые x и y пикселей. Массив должен иметь форму [x, y]. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { grid: [ 50, 20 ] }
);
13 справиться

Если указан, ограничение перетаскивания от запуска, если mousedown не происходит на указанных элементах. По умолчанию его значение равно «ложь».

Вариант – ручка

Если указан, ограничение перетаскивания от запуска, если mousedown не происходит на указанных элементах. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { handle: "h2" }
);
14 помощник

Позволяет использовать вспомогательный элемент для перетаскивания отображения. По умолчанию его значение «оригинал».

Вариант – помощник

Позволяет использовать вспомогательный элемент для перетаскивания отображения. По умолчанию его значение «оригинал».

Синтаксис

$(".selector").draggable(
   { helper: "clone" }
);
15 iframeFix

Не позволяйте фрейм-фреймам захватывать события перемещения мыши во время перетаскивания. По умолчанию его значение равно «ложь».

Опция – iframeFix

Не позволяйте фрейм-фреймам захватывать события перемещения мыши во время перетаскивания. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { iframeFix: true }
);
16 помутнение

Непрозрачность элемента перемещается при перемещении. По умолчанию его значение равно «ложь».

Вариант – непрозрачность

Непрозрачность элемента перемещается при перемещении. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   {  opacity: 0.35 }
);
17 refreshPositions

Если установлено значение true , все позиции сбрасывания рассчитываются при каждом перемещении мыши. По умолчанию его значение равно «ложь».

Опция – refreshPositions

Если установлено значение true , все позиции сбрасывания рассчитываются при каждом перемещении мыши. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { refreshPositions: true }
);
18 возвращаться

Указывает, был ли элемент перемещен обратно в исходное положение в конце перемещения. По умолчанию его значение равно «ложь».

Вариант – вернуть

Указывает, был ли элемент перемещен обратно в исходное положение в конце перемещения. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { revert: true }
);
19 revertDuration

Продолжительность смещения (в миллисекундах), после которой элемент возвращается в исходное положение (см. Options.revert). По умолчанию его значение равно «500».

Опция – revertDuration

Продолжительность смещения (в миллисекундах), после которой элемент возвращается в исходное положение (см. Options.revert). По умолчанию его значение равно «500».

Синтаксис

$(".selector").draggable(
   { revertDuration: 200 }
);
20 объем

Используется для группировки наборов перетаскиваемых и сбрасываемых предметов, в дополнение к опции подтверждения у сбрасываемого предмета. По умолчанию его значением является «по умолчанию».

Вариант – сфера

Используется для группировки наборов перетаскиваемых и сбрасываемых предметов, в дополнение к опции подтверждения у сбрасываемого предмета. По умолчанию его значением является «по умолчанию».

Синтаксис

$(".selector").draggable(
   { scope: "tasks" }
);
21 свиток

Если установлено значение true (по умолчанию), дисплей будет прокручиваться, если элемент перемещается за пределы видимой области окна. По умолчанию его значение равно «true».

Вариант – прокрутка

Если установлено значение true (по умолчанию), дисплей будет прокручиваться, если элемент перемещается за пределы видимой области окна. По умолчанию его значение равно «true».

Синтаксис

$(".selector").draggable(
   { scroll: false }
);
22 scrollSensitivity

Указывает, сколько пикселей мышь должна покинуть, чтобы вызвать прокрутку экрана. По умолчанию его значение равно «20».

Опция – scrollSensitivity

Указывает, сколько пикселей мышь должна покинуть, чтобы вызвать прокрутку экрана. По умолчанию его значение равно «20».

Синтаксис

$(".selector").draggable(
   { scrollSensitivity: 100 }
);
23 Scrollspeed

Указывает скорость прокрутки дисплея после начала прокрутки. По умолчанию его значение равно «20».

Опция – scrollSpeed

Указывает скорость прокрутки дисплея после начала прокрутки. По умолчанию его значение равно «20».

Синтаксис

$(".selector").draggable(
   { scrollSpeed: 100 }
);
24 щелчок

Регулирует отображение перемещаемого элемента на других элементах (которые управляются). По умолчанию его значение равно «ложь».

Вариант – оснастка

Регулирует отображение перемещаемого элемента на других элементах (которые управляются). По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { snap: true }
);
25 SNAPMODE

Определяет, как следует выполнить настройку между перемещенным элементом и теми, которые указаны в options.snap . По умолчанию его значение равно «оба».

Опция – snapMode

> Определяет, как следует выполнить настройку между перемещенным элементом и указанным в options.snap . По умолчанию его значение равно «оба».

Синтаксис

$(".selector").draggable(
   { snapMode: "inner" }
);
26 snapTolerance

Максимальное количество пикселей в разнице в положении, необходимое для установления регулировки. По умолчанию его значение равно «20».

Опция – snapTolerance

Максимальное количество пикселей в разнице в положении, необходимое для установления регулировки. По умолчанию его значение равно «20».

Синтаксис

$(".selector").draggable(
   { snapTolerance: 30 }
);
27 стек

Управляет z-индексом набора элементов, которые соответствуют селектору, всегда переносит перетаскиваемый в данный момент элемент на передний план. Очень полезно в таких вещах, как оконные менеджеры. По умолчанию его значение равно «ложь».

Опция – стек

Управляет z-индексом набора элементов, которые соответствуют селектору, всегда переносит перетаскиваемый в данный момент элемент на передний план. Очень полезно в таких вещах, как оконные менеджеры. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { stack: ".products"  }
);
28 ZIndex

Z-индекс для помощника при перетаскивании. По умолчанию его значение равно «ложь».

Опция – zIndex

Z-индекс для помощника при перетаскивании. По умолчанию его значение равно «ложь».

Синтаксис

$(".selector").draggable(
   { zIndex: 100 }
);

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно true .

Опция – addClasses

Если для этой опции задано значение false , это предотвратит добавление класса ui-draggable в список выбранных элементов DOM. По умолчанию его значение равно true .

Синтаксис

Определяет элемент, к которому должен быть добавлен перетаскиваемый помощник при перетаскивании. По умолчанию его значением является «родитель».

Вариант – appendTo

Определяет элемент, к которому должен быть добавлен перетаскиваемый помощник при перетаскивании. По умолчанию его значением является «родитель».

Синтаксис

Этот параметр ограничивает перетаскивание по горизонтальной (x) или вертикальной (y) оси. Возможные значения: «х», «у».

Опция – ось

Этот параметр ограничивает перетаскивание по горизонтальной (x) или вертикальной (y) оси. Возможные значения: «х», «у».

Синтаксис

Вы можете использовать эту опцию, чтобы предотвратить запуск перетаскивания на указанных элементах. По умолчанию его значение равно «input, textarea, button, select, option».

Опция – отменить

Вы можете использовать эту опцию, чтобы предотвратить запуск перетаскивания на указанных элементах. По умолчанию его значение равно «input, textarea, button, select, option»

Синтаксис

Вы можете использовать эту опцию, чтобы указать список, элементы которого являются взаимозаменяемыми. В конце размещения элемент является частью списка. По умолчанию его значение равно «ложь».

Опция – connectToSortable

Вы можете использовать эту опцию, чтобы указать список, элементы которого являются взаимозаменяемыми. В конце размещения элемент является частью списка. По умолчанию его значение равно «ложь».

Синтаксис

Ограничивает перетаскивание в пределах указанного элемента или региона. По умолчанию его значение равно «ложь».

Вариант – сдерживание

Ограничивает перетаскивание в пределах указанного элемента или региона. По умолчанию его значение равно «ложь».

Синтаксис

Определяет CSS-свойство курсора при перемещении элемента. Он представляет форму указателя мыши. По умолчанию его значение равно «auto».

Опция – курсор

Определяет CSS-свойство курсора при перемещении элемента. Он представляет форму указателя мыши. По умолчанию его значение равно «auto». Другие возможные значения –

Синтаксис

Устанавливает смещение помощника перетаскивания относительно курсора мыши. Координаты могут быть заданы в виде хэша, используя комбинацию из одной или двух клавиш: {сверху, слева, справа, снизу}. По умолчанию его значение равно «ложь».

Опция – курсор

Устанавливает смещение помощника перетаскивания относительно курсора мыши. Координаты могут быть заданы в виде хэша, используя комбинацию из одной или двух клавиш: {сверху, слева, справа, снизу}. По умолчанию его значение равно «ложь».

Синтаксис

Задержка в миллисекундах, после которой учитывается первое движение мыши. Смещение может начаться после этого времени. По умолчанию его значение равно «0».

Опция – задержка

Задержка в миллисекундах, после которой учитывается первое движение мыши. Смещение может начаться после этого времени. По умолчанию его значение равно «0».

Синтаксис

При значении true отключает возможность перемещения предметов. Элементы не могут быть перемещены до тех пор, пока эта функция не будет включена (с помощью команды перетаскивания («включить»)). По умолчанию его значение равно «ложь».

Опция – отключена

При значении true отключает возможность перемещения предметов. Элементы не могут быть перемещены до тех пор, пока эта функция не будет включена (с помощью команды перетаскивания («включить»)). По умолчанию его значение равно «ложь».

Синтаксис

Количество пикселей, на которое должна быть перемещена мышь, прежде чем смещение будет учтено. По умолчанию его значение равно «1».

Вариант – расстояние

Количество пикселей, на которое должна быть перемещена мышь, прежде чем смещение будет учтено. По умолчанию его значение равно «ложь».

Синтаксис

Привязывает помощника перетаскивания к сетке, каждые x и y пикселей. Массив должен иметь форму [x, y]. По умолчанию его значение равно «ложь».

Опция – сетка

Привязывает помощника перетаскивания к сетке, каждые x и y пикселей. Массив должен иметь форму [x, y]. По умолчанию его значение равно «ложь».

Синтаксис

Если указан, ограничение перетаскивания от запуска, если mousedown не происходит на указанных элементах. По умолчанию его значение равно «ложь».

Вариант – ручка

Если указан, ограничение перетаскивания от запуска, если mousedown не происходит на указанных элементах. По умолчанию его значение равно «ложь».

Синтаксис

Позволяет использовать вспомогательный элемент для перетаскивания отображения. По умолчанию его значение «оригинал».

Вариант – помощник

Позволяет использовать вспомогательный элемент для перетаскивания отображения. По умолчанию его значение «оригинал».

Синтаксис

Не позволяйте фрейм-фреймам захватывать события перемещения мыши во время перетаскивания. По умолчанию его значение равно «ложь».

Опция – iframeFix

Не позволяйте фрейм-фреймам захватывать события перемещения мыши во время перетаскивания. По умолчанию его значение равно «ложь».

Синтаксис

Непрозрачность элемента перемещается при перемещении. По умолчанию его значение равно «ложь».

Вариант – непрозрачность

Непрозрачность элемента перемещается при перемещении. По умолчанию его значение равно «ложь».

Синтаксис

Если установлено значение true , все позиции сбрасывания рассчитываются при каждом перемещении мыши. По умолчанию его значение равно «ложь».

Опция – refreshPositions

Если установлено значение true , все позиции сбрасывания рассчитываются при каждом перемещении мыши. По умолчанию его значение равно «ложь».

Синтаксис

Указывает, был ли элемент перемещен обратно в исходное положение в конце перемещения. По умолчанию его значение равно «ложь».

Вариант – вернуть

Указывает, был ли элемент перемещен обратно в исходное положение в конце перемещения. По умолчанию его значение равно «ложь».

Синтаксис

Продолжительность смещения (в миллисекундах), после которой элемент возвращается в исходное положение (см. Options.revert). По умолчанию его значение равно «500».

Опция – revertDuration

Продолжительность смещения (в миллисекундах), после которой элемент возвращается в исходное положение (см. Options.revert). По умолчанию его значение равно «500».

Синтаксис

Используется для группировки наборов перетаскиваемых и сбрасываемых предметов, в дополнение к опции подтверждения у сбрасываемого предмета. По умолчанию его значением является «по умолчанию».

Вариант – сфера

Используется для группировки наборов перетаскиваемых и сбрасываемых предметов, в дополнение к опции подтверждения у сбрасываемого предмета. По умолчанию его значением является «по умолчанию».

Синтаксис

Если установлено значение true (по умолчанию), дисплей будет прокручиваться, если элемент перемещается за пределы видимой области окна. По умолчанию его значение равно «true».

Вариант – прокрутка

Если установлено значение true (по умолчанию), дисплей будет прокручиваться, если элемент перемещается за пределы видимой области окна. По умолчанию его значение равно «true».

Синтаксис

Указывает, сколько пикселей мышь должна покинуть, чтобы вызвать прокрутку экрана. По умолчанию его значение равно «20».

Опция – scrollSensitivity

Указывает, сколько пикселей мышь должна покинуть, чтобы вызвать прокрутку экрана. По умолчанию его значение равно «20».

Синтаксис

Указывает скорость прокрутки дисплея после начала прокрутки. По умолчанию его значение равно «20».

Опция – scrollSpeed

Указывает скорость прокрутки дисплея после начала прокрутки. По умолчанию его значение равно «20».

Синтаксис

Регулирует отображение перемещаемого элемента на других элементах (которые управляются). По умолчанию его значение равно «ложь».

Вариант – оснастка

Регулирует отображение перемещаемого элемента на других элементах (которые управляются). По умолчанию его значение равно «ложь».

Синтаксис

Определяет, как следует выполнить настройку между перемещенным элементом и теми, которые указаны в options.snap . По умолчанию его значение равно «оба».

Опция – snapMode

> Определяет, как следует выполнить настройку между перемещенным элементом и указанным в options.snap . По умолчанию его значение равно «оба».

Синтаксис

Максимальное количество пикселей в разнице в положении, необходимое для установления регулировки. По умолчанию его значение равно «20».

Опция – snapTolerance

Максимальное количество пикселей в разнице в положении, необходимое для установления регулировки. По умолчанию его значение равно «20».

Синтаксис

Управляет z-индексом набора элементов, которые соответствуют селектору, всегда переносит перетаскиваемый в данный момент элемент на передний план. Очень полезно в таких вещах, как оконные менеджеры. По умолчанию его значение равно «ложь».

Опция – стек

Управляет z-индексом набора элементов, которые соответствуют селектору, всегда переносит перетаскиваемый в данный момент элемент на передний план. Очень полезно в таких вещах, как оконные менеджеры. По умолчанию его значение равно «ложь».

Синтаксис

Z-индекс для помощника при перетаскивании. По умолчанию его значение равно «ложь».

Опция – zIndex

Z-индекс для помощника при перетаскивании. По умолчанию его значение равно «ложь».

Синтаксис

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

Функциональность по умолчанию

В следующем примере демонстрируется простой пример перетаскиваемой функциональности, не передающей параметры методу draggable () .

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
      </style>
      
      <script>
         $(function() {
            $( "#draggable" ).draggable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p>Drag me !!!</p>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле dragexample.htm и откроем его в стандартном браузере, поддерживающем javascript. Вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом –