JqueryUI — сортируемый

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

Метод sortable (options) объявляет, что элемент HTML содержит взаимозаменяемые элементы. Параметр options — это объект, который определяет поведение элементов, задействованных при переупорядочении.

Синтаксис

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

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

$(".selector").sortable(
   { appendTo: document.body }
);

$(".selector").sortable(
   { axis: "x" }
);

$(".selector").sortable(
   { cancel: "a,button" }
);

$(".selector").sortable(
   { connectWith: "#identifier" }
);

$(".selector").sortable(
   { containment: "parent" }
);

$(".selector").sortable(
   { cursor: "move" }
);

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);

$(".selector").sortable(
   { delay: 150 }
);

$(".selector").sortable(
   { disabled: true }
);

$(".selector").sortable(
   { distance: 5 }
);

$(".selector").sortable(
   { dropOnEmpty: false }
);

$(".selector").sortable(
   { forceHelperSize: true }
);

$(".selector").sortable(
   { forcePlaceholderSize: true }
);

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);

$(".selector").sortable(
   { handle: ".handle" }
);

$(".selector").sortable(
   { helper: "clone" }
);

$(".selector").sortable(
   { items: "> li" }
);

$(".selector").sortable(
   { opacity: 0.5 }
);

$(".selector").sortable(
   { addClasses: false }
);

$(".selector").sortable(
   { revert: true }
);

$(".selector").sortable(
   { scroll: false }
);

$(".selector").sortable(
   { scrollSensitivity: 10 }
);

$(".selector").sortable(
   { scrollSpeed: 40 }
);

$(".selector").sortable(
   { tolerance: "pointer" }
);

$(".selector").sortable(
   { zIndex: 9999 }
);

Эта опция указывает элемент, в который новый элемент, созданный с помощью options.helper, будет вставлен во время перемещения / перетаскивания. По умолчанию его значение является родительским .

Вариант — appendTo

Эта опция указывает элемент, в который новый элемент, созданный с помощью options.helper, будет вставлен во время перемещения / перетаскивания. По умолчанию его значение является родительским .

Это может быть типа —

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

jQuery — указывает на объект jQuery, содержащий элемент для добавления помощника.

Элемент — элемент в объектной модели документа (DOM), к которому требуется добавить помощника.

String — Строка «parent» заставит помощника быть родным элементом сортируемого элемента.

Синтаксис

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

Опция — ось

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

Синтаксис

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

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

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

Синтаксис

Эта опция является селектором, который идентифицирует другой сортируемый элемент, который может принимать элементы из этой сортируемой. Это позволяет перемещать элементы из одного списка в другие списки, что является частым и полезным взаимодействием с пользователем. Если опущен, другой элемент не подключен. Это односторонние отношения. По умолчанию его значение равно false .

Опция — подключить с

Эта опция является селектором, который идентифицирует другой сортируемый элемент, который может принимать элементы из этой сортируемой. Это позволяет перемещать элементы из одного списка в другие списки, что является частым и полезным взаимодействием с пользователем. Если опущен, другой элемент не подключен. Это односторонние отношения. По умолчанию его значение равно false .

Синтаксис

Эта опция указывает элемент, внутри которого происходит смещение. Элемент будет представлен селектором (будет рассматриваться только первый элемент в списке), элементом DOM или строкой «parent» (родительский элемент) или «window» (страница HTML).

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

Эта опция указывает элемент, внутри которого происходит смещение.

Это может быть типа —

Селектор — указывает селектор. Элемент будет представлен селектором (будет рассматриваться только первый элемент в списке)

Элемент — элемент DOM для использования в качестве контейнера.

String — Строка, идентифицирующая элемент для использования в качестве контейнера. Возможные значения: родитель (родительский элемент), документ или окно (HTML-страница).

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

Эта опция, если установлена ​​в true , отключает сортируемую функциональность. По умолчанию его значение равно false .

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

Эта опция, если установлена ​​в true , отключает сортируемую функциональность. По умолчанию его значение равно false .

Синтаксис

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

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

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

Синтаксис

Если для этой опции задано значение false , то элементы из этого сортируемого объекта не могут быть сброшены при пустом сортируемом соединении. По умолчанию его значение равно true .

Опция — dropOnEmpty

Если для этой опции задано значение false , то элементы из этого сортируемого объекта не могут быть сброшены при пустом сортируемом соединении. По умолчанию его значение равно true .

Синтаксис

Если этот параметр установлен в значение true , размер помощника будет иметь размер. По умолчанию его значение равно false .

Опция — forceHelperSize

Если этот параметр установлен в значение true , размер помощника будет иметь размер. По умолчанию его значение равно false .

Синтаксис

Этот параметр, если задано значение true , учитывает размер заполнителя при перемещении элемента. Эта опция полезна только если инициализирован options.placeholder . По умолчанию его значение равно false .

Опция — forcePlaceholderSize

Этот параметр, если задано значение true , учитывает размер заполнителя при перемещении элемента. Эта опция полезна только если инициализирован options.placeholder . По умолчанию его значение равно false .

Синтаксис

Этот параметр представляет собой массив [x, y], указывающий количество пикселей, которые сортирующий элемент перемещает по горизонтали и вертикали во время перемещения мыши. По умолчанию его значение равно false .

Опция — сетка

Этот параметр представляет собой массив [x, y], указывающий количество пикселей, которые сортирующий элемент перемещает по горизонтали и вертикали во время перемещения мыши. По умолчанию его значение равно false .

Синтаксис

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

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

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

Синтаксис

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

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

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

String — Если установлено значение «clone», элемент будет клонирован, а клон будет перетаскиваться.

Функция — функция, которая возвращает элемент DOME для использования при перетаскивании.

Синтаксис

Эта опция указывает, какие элементы внутри элемента DOM должны быть отсортированы. По умолчанию его значение >> .

Опция — предметы

Эта опция указывает, какие элементы внутри элемента DOM должны быть отсортированы. По умолчанию его значение > *

Синтаксис

Эта опция используется для определения непрозрачности помощника при сортировке. По умолчанию его значение равно false .

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

Эта опция используется для определения непрозрачности помощника при сортировке. По умолчанию его значение равно false .

Синтаксис

Эта опция используется для имени класса, которое применяется к пустому пространству. По умолчанию его значение равно false .

Опция — заполнитель

Синтаксис

Эта опция решает, должны ли сортируемые элементы возвращаться на свои новые позиции, используя плавную анимацию. По умолчанию его значение равно false .

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

Эта опция решает, должны ли сортируемые элементы возвращаться на свои новые позиции, используя плавную анимацию. По умолчанию его значение равно false .

Синтаксис

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

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

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

Синтаксис

Эта опция указывает, сколько пикселей мышь должна покинуть видимую область, чтобы вызвать прокрутку. По умолчанию его значение равно 20 . Эта опция используется только с параметром options.scroll, установленным в true.

Опция — scrollSensitivity

Эта опция указывает, сколько пикселей мышь должна покинуть видимую область, чтобы вызвать прокрутку. По умолчанию его значение равно 20 . Эта опция используется только с параметром options.scroll, установленным в true.

Синтаксис

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

Опция — scrollSpeed

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

Синтаксис

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

Вариант — толерантность

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

Пересечение — элемент перекрывает другой элемент как минимум на 50%.

указатель — указатель мыши перекрывает другой элемент.

Синтаксис

Эта опция представляет z-index для элемента / помощника во время сортировки. По умолчанию его значение равно 1000 .

Опция — zIndex

Эта опция представляет Z-индекс для элемента / помощника во время сортировки. По умолчанию его значение равно 1000 .

Синтаксис

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

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

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

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

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

Переставьте продукты выше, используйте мышь, чтобы перетаскивать предметы.

Использование опций Задержка и Расстояние

В следующем примере демонстрируется использование трех параметров (a) задержка и (b) расстояние в функции сортировки JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

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

Переставьте продукты выше, используйте мышь, чтобы перетаскивать предметы. Чтобы предотвратить случайную сортировку по задержке (времени) или расстоянию, мы установили количество миллисекунд, которые необходимо перетащить, прежде чем сортировка начнется с параметром задержки . Мы также установили расстояние в пикселях, которое необходимо перетащить, прежде чем сортировка начнется с параметром расстояния .

Использование Placeholder

В следующем примере демонстрируется использование заполнителя с тремя опциями в функции сортировки JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

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

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

Использование опций Connectwith и Droponempty

В следующем примере демонстрируется использование трех параметров (a) connectWith и (b) dropOnEmpty в функции сортировки JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

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

Сортируйте элементы из одного List1 в другой (List2) и наоборот, передавая селектор в параметр connectWith . Это делается путем группировки всех связанных списков с помощью класса CSS, а затем передачи этого класса в сортируемую функцию (т. Е. ConnectWith: ‘# sortable-5, # sortable-6’).

Попробуйте перетащить элементы из Списка 3 в Список 2 или Список 1. Поскольку мы установили для параметра dropOnEmpty значение false , эти элементы будет невозможно отбросить.

Метод $ (selector, context) .sortable («action», [params])

Метод сортировки (action, params) может выполнять воздействие на сортируемые элементы, например, для предотвращения смещения. Действие указывается в виде строки в первом аргументе, и необязательно, один или несколько параметров могут быть предоставлены на основе данного действия.

По сути, здесь действия — это не что иное, как методы jQuery, которые мы можем использовать в виде строки.

Синтаксис

$(selector, context).sortable ("action", [params]);

В следующей таблице перечислены действия для этого метода —

$(".selector").sortable("cancel");

$(".selector").sortable("destroy");

$(".selector").sortable("disable");

$(".selector").sortable("enable");

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );

$(".selector").sortable("option");

$(".selector").sortable("option", "disabled", true);

$( ".selector" ).sortable( "option", { disabled: true } );

$(".selector").sortable("refresh");

var sortedIDs = $( ".selector" ).sortable( "toArray" );

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );

$(".selector").sortable("refreshPositions");

$(".selector").sortable("widget");

Это действие отменяет текущую операцию сортировки. Это наиболее полезно в обработчиках для сортировки приема и сортировки событий остановки. Этот метод не принимает никаких аргументов.

Действие — отмена ()

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

Синтаксис

Это действие полностью удаляет функциональность сортировки. Это вернет элемент обратно в его состояние перед инициализацией. Этот метод не принимает никаких аргументов.

Действие — уничтожить ()

Это действие полностью удаляет функциональность сортировки. Это вернет элемент обратно в его состояние перед инициализацией. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие отключает сортировку любых сортируемых элементов в упакованном наборе. Сортируемость элементов не удаляется и может быть восстановлена ​​путем вызова варианта включения этого метода. Этот метод не принимает никаких аргументов.

Действие — отключить ()

Это действие отключает сортировку любых сортируемых элементов в упакованном наборе. Сортируемость элементов не удаляется и может быть восстановлена ​​путем вызова варианта включения этого метода. Этот метод не принимает никаких аргументов.

Синтаксис

Повторное включение сортировки для любых сортируемых элементов в упакованном наборе, сортировка которых была отключена. Обратите внимание, что этот метод не добавляет сортируемость любым несортируемым элементам. Этот метод не принимает никаких аргументов.

Действие — включить ()

Повторное включение сортировки для любых сортируемых элементов в упакованном наборе, сортировка которых была отключена. Обратите внимание, что этот метод не добавляет сортируемость любым несортируемым элементам. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение, связанное с указанным параметром optionName . Где optionName — имя опции, которую нужно получить.

Действие — опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName . Где optionName — имя опции, которую нужно получить.

Синтаксис

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

Действие — опция ()

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

Синтаксис

Это действие устанавливает значение сортируемой опции, связанной с указанным optionName . Где optionName — это имя параметра, который нужно установить, а value — это значение, которое нужно установить для параметра.

Действие — опция (optionName, value)

Это действие устанавливает значение сортируемой опции, связанной с указанным optionName . Где optionName — это имя параметра, который нужно установить, а value — это значение, которое нужно установить для параметра.

Синтаксис

Устанавливает один или несколько параметров для сортировки. Где options — это карта пар опций-значений, которые нужно установить.

Действие — опция (варианты)

Устанавливает один или несколько параметров для сортировки. Где options — это карта пар опций-значений, которые нужно установить.

Синтаксис

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

Действие — обновить ()

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

Синтаксис

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

Действие — toArray (варианты)

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

Синтаксис

Этот метод возвращает сериализованную строку запроса (отправляемую через Ajax), сформированную из сортируемой.

Действие — сериализация (варианты)

Этот метод возвращает сериализованную строку запроса (отправляемую через Ajax), сформированную из сортируемой. Он работает по умолчанию, просматривая идентификатор каждого элемента в формате «setname_number», и выдает хеш, например «setname [] = number & setname [] = number».

Синтаксис

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

Действие — refreshPositions ()

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

Синтаксис

Этот метод возвращает объект jQuery, содержащий сортируемый элемент. Этот метод не принимает никаких аргументов.

Действие — виджет ()

Этот метод возвращает объект jQuery, содержащий сортируемый элемент. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование метода toArray (options) .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

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

Попробуйте отсортировать предметы, порядок предметов отображается внизу. Здесь мы вызываем $ (this) .sortable (‘toArray’). ToString () , который выдаст список строк всех идентификаторов элементов, он может выглядеть как 1,2,3,4 .

Управление событиями на сортируемых элементах

В дополнение к способу сортировки (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы события, которые запускаются для определенного события. Эти методы событий перечислены ниже —

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

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

Событие — активировать (событие, пользовательский интерфейс)

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

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие вызывается, когда операция сортировки заканчивается, при этом ссылка на вспомогательный элемент и заполнитель по-прежнему действительна.

Событие — beforeStop (событие, пользовательский интерфейс)

Это событие вызывается, когда операция сортировки заканчивается, при этом ссылка на вспомогательный элемент и заполнитель по-прежнему действительна. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

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

Событие — изменить (событие, пользовательский интерфейс)

Это событие срабатывает, когда отсортированный элемент меняет положение в DOM. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие срабатывает при создании сортируемой.

Событие — создать (событие, пользовательский интерфейс)

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

Синтаксис

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

Событие — деактивировать (событие, пользовательский интерфейс)

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

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие срабатывает, когда элемент сортировки перемещается из связанного списка.

Событие — выход (событие, пользовательский интерфейс)

Это событие срабатывает, когда элемент сортировки перемещается из связанного списка. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие срабатывает, когда элемент сортировки перемещается в связанный список.

Событие — окончено (событие, интерфейс)

Это событие срабатывает, когда элемент сортировки перемещается в связанный список. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

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

Событие — получить (событие, интерфейс)

Это событие вызывается, когда связанный список получил элемент сортировки из другого списка. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

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

Событие — удалить (событие, пользовательский интерфейс)

Это событие вызывается, когда элемент сортировки удаляется из связанного списка и перетаскивается в другой. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

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

Событие — сортировка (событие, пользовательский интерфейс)

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

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие срабатывает при запуске операции сортировки.

Событие — начало (событие, пользовательский интерфейс)

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

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие вызывается после завершения операции сортировки.

Событие — остановка (событие, интерфейс)

Это событие вызывается после завершения операции сортировки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

Это событие вызывается, когда операция сортировки останавливается и позиция элемента изменяется.

Событие — обновление (событие, пользовательский интерфейс)

Это событие вызывается, когда операция сортировки останавливается и позиция элемента изменяется. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

helper — объект jQuery, представляющий сортируемый помощник.

item — Объект jQuery, представляющий текущий перетаскиваемый элемент.

offset — текущая абсолютная позиция помощника, представленная как {top, left} ..

position — текущая позиция CSS помощника как объекта {top, left}.

originalPosition — исходная позиция элемента, представленная как {top, left}.

sender — сортируемый, из которого получен элемент, если он перемещается из одного сортируемого в другой.

placeholder — Объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Синтаксис

пример

В следующем примере демонстрируется использование метода события во время удаления функциональности. Этот пример демонстрирует использование событий receive , start и stop .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

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

Попробуйте отсортировать элементы в Списке 1, вы увидите сообщение, отображаемое в начале и в конце события. Теперь перетащите элементы из Списка 2 в Список 1, снова появится сообщение о событии приема .