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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

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

$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);

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

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

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

$(".selector").draggable(
   { delay: 300 }
);

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

$(".selector").draggable(
   { distance: 10 }
);

$(".selector").draggable(
   { grid: [ 50, 20 ] }
);

$(".selector").draggable(
   { handle: "h2" }
);

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

$(".selector").draggable(
   { iframeFix: true }
);

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

$(".selector").draggable(
   { refreshPositions: true }
);

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

$(".selector").draggable(
   { revertDuration: 200 }
);

$(".selector").draggable(
   { scope: "tasks" }
);

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

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

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

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

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

$(".selector").draggable(
   { snapTolerance: 30 }
);

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

$(".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. Вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Использование Disable, Distance и Delay

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

<!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>
   </head>
   
   <body>
      <div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me!</span><br /><br />
      </div>
      <div id = "div2" style = "border:solid 1px;background-color:grey;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br /><br />
      </div>
      <div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
         <span>
            You have to wait for 500ms for dragging to start!
         </span>
         <br /><br />
      </div>

      <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 500 }
         );
      </script>
   </body>
</html>

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

Сдерживающее движение

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

<!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>
   </head>
      
   <body>
      <div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can drag me only within this div.</span><br /><br />
      </div>
      <div id = "div5" style = "border:solid 1px;background-color:grey;">
         <span>You can drag me only along x axis.</span><br /><br />
      </div>

      <script>
         $("#div4 span").draggable ({
            containment : "#div4"
         });
         $("#div5 span").draggable ({
            axis : "x"
         });
      </script>
   </body>
</html>

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

Здесь элементам <span> запрещено выходить за пределы <div> с идентификатором div4. Вы также можете наложить ограничения на вертикальное или горизонтальное движение, используя параметры оси «x» или «y», что также продемонстрировано.

Переместить контент путем дублирования

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

<!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>
   </head>
   
   <body>
      <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
         <span>You can duplicate me....</span>
      </div>
      
      <script>
         $("#div6 span").draggable ({
            helper : "clone"
         });
      </script>
   </body>
</html>

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

Как вы можете видеть, когда перетаскивается первый элемент, перемещается только клонированный элемент, а исходный элемент остается на месте. Если вы отпустите кнопку мыши, клонированный элемент исчезнет, ​​а исходный элемент останется в исходном положении.

Получить текущее значение параметра

Следующий пример демонстрирует, как вы можете получить значение любой опции в любое время во время выполнения вашего скрипта. Здесь мы будем читать значение параметров cursor и cursorAt , установленных во время выполнения. Аналогичным образом вы можете получить значение любых других доступных опций.

<!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>
   </head>

   <body>
      <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
         <span>Click anywhere on me to see cursor type...</span>
      </div>

      <script>
         /* First make the item draggable */
         $("#divX span").draggable();

         $("#divX span").bind('click', function( event ) {
            var cursor = $( "#divX span" ).draggable( "option", "cursor" );
            var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
            alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
         });
      </script>
   </body>
</html>

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

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

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

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

Синтаксис

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

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

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

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

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

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

var options = $( ".selector" ).draggable( "option" );

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

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

var widget = $(".selector ).draggable("widget");

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

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

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

Синтаксис

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

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

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

Синтаксис

Реактивирует управление перетаскиванием. Элементы могут быть перемещены снова.

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

Реактивирует управление перетаскиванием. Элементы могут быть перемещены снова.

Синтаксис

Получает значение, связанное с указанным параметром optionName . Где optionName — это имя опции для получения и имеет тип String .

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

Получает значение, связанное с указанным параметром optionName . Где optionName — это имя опции для получения и имеет тип String .

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

пример

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

<!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>
   </head>
   
   <body>
      <div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id = "div8" style = "border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </div>
      
      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

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

Как видите, первый элемент отключен, а перетаскивание второго элемента включено, и вы можете попытаться перетащить его.

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

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

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

$(".selector").draggable(
   drag: function(event, ui) {}
);

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

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

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

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

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

Синтаксис

Срабатывает при перемещении мыши во время перетаскивания. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object, такой как helper, position, offset.

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

Срабатывает при перемещении мыши во время перетаскивания. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object, такой как helper, position, offset.

Синтаксис

Срабатывает, когда начинается перетаскивание. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object, такой как helper, position, offset.

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

Срабатывает, когда начинается перетаскивание. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object, такой как helper, position, offset.

Синтаксис

Срабатывает, когда перетаскивание останавливается. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object, такой как helper, position, offset.

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

Срабатывает, когда перетаскивание останавливается. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object, такой как helper, position, offset.

Синтаксис

пример

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

<!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>
   </head>
   
   <body>
      <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
         <span>Drag me to check the event method firing</span><br /><br />
      </div>
      
      <script>
         $("#div9 span").draggable ({
            cursor: "move",
            axis : "x",
            drag: function( event, ui ) {
               alert("hi..");
            }
         });
      </script>
   </body>
</html>

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

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

JqueryUI — Droppable

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

Синтаксис

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

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

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

Синтаксис

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

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

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

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

$( ".selector" ).droppable(
   { accept: ".special" }
);

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);

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

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

$( ".selector" ).droppable(
   { greedy: true }
);

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);

$( ".selector" ).droppable(
   { scope: "tasks" }
);

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

Вариант — принять

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

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

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

Функция — функция обратного вызова будет вызываться для каждого перетаскиваемого элемента на странице. Эта функция должна возвращать true, если перетаскиваемый элемент принимается droppable.

Синтаксис

Этот параметр представляет собой строку, представляющую один или несколько классов CSS, которые необходимо добавить к элементу droppable при перетаскивании принятого элемента (один из указанных в options.accept ). По умолчанию его значение равно false .

Опция — активный класс

Этот параметр представляет собой строку, представляющую один или несколько классов CSS, которые необходимо добавить к элементу droppable при перетаскивании принятого элемента (один из указанных в options.accept ). По умолчанию его значение равно false .

Синтаксис

Эта опция, когда установлено в false , предотвратит добавление класса ui-droppable к элементам droppable. По умолчанию его значение равно true .

Опция — addClasses

Эта опция, когда установлено в false , предотвратит добавление класса ui-droppable к элементам droppable. По умолчанию его значение равно true . Это может быть желательно в качестве оптимизации производительности при вызове .droppable () init для сотен элементов.

Синтаксис

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

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

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

Синтаксис

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

Вариант — жадный

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

Синтаксис

Эта опция — String, представляющая один или несколько CSS-классов, которые будут добавлены к элементу droppable, когда принятый элемент (элемент, указанный в options.accept ) перемещается в него. По умолчанию его значение равно false .

Опция — hoverClass

Эта опция — String, представляющая один или несколько CSS-классов, которые будут добавлены к элементу droppable, когда принятый элемент (элемент, указанный в options.accept ) перемещается в него. По умолчанию его значение равно false .

Синтаксис

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

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

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

Синтаксис

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

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

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

fit — Draggable полностью закрывает раскрывающийся элемент.

Пересечение — Draggable перекрывает выпадающий элемент не менее чем на 50% в обоих направлениях.

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

Прикосновение — перетаскивание перекрывает каплю любого количества касания.

Синтаксис

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

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

Использование addClass, отключено и допуск

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

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

Теперь бросьте элемент на «Допуск касания!» поле (просто коснитесь края этого поля) и посмотрите изменения целевого элемента. Теперь добавьте элемент «Tolerance Fit!» target, перетаскиваемый элемент должен полностью перекрывать целевой элемент, то есть «Tolerance Fit!» цель.

Выберите элементы для удаления

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

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

Здесь вы можете видеть, что вы можете добавить элемент «Люди из Японии» только на цель «Япония» и элемент «Люди из Индии» на цель Индия. Аналогично, область «Люди, которые хотят изучать Java» настроена на «Java», а «Люди, которые хотят изучать Spring» установлена ​​на «Spring target».

Управление внешностью

В следующем примере демонстрируется использование параметров activeClass и hoverClass класса JqueryUI, которые помогают нам управлять внешним видом.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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 type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

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

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

Метод $ (селектор, контекст) .droppable («действие», params)

Метод droppable («action», params) может выполнять действие с элементами drop-to-drop, например, предотвращать функцию drop-drop. Действие указывается в виде строки в первом аргументе (например, «отключить», чтобы предотвратить отбрасывание). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).droppable ("action", params);;

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

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

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

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

var options = $( ".selector" ).droppable( "option" );

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

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

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

var widget = $( ".selector" ).droppable( "widget" );

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

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

Если вы уроните «drag1» на любом из элементов с именем «drop here», вы заметите, что этот элемент отбрасывается, и это действие полностью уничтожает функциональность элемента, подлежащего удалению. Вы не можете сбросить «drag2» и «drag3» на этот элемент снова.

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

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

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

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

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

$(".selector").droppable(
   drop: function(event, ui) {}
);

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

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

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

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

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

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

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

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

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

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

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

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</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>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },   
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

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

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

JqueryUI — изменяемый размер

jQueryUI предоставляет метод resizable () для изменения размера любого элемента DOM. Этот метод упрощает изменение размера элемента, что в противном случае занимает много времени и много кода в HTML. Метод resizable () отображает значок в правом нижнем углу элемента для изменения размера.

Синтаксис

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

Метод $ (селектор, контекст) .resizable (опции)

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

Синтаксис

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

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

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

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

$( ".selector" ).resizable({ alsoResize: "#identifier" });

$( ".selector" ).resizable({ animate: true });

$( ".selector" ).resizable({ animateDuration: "fast" });

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });

$( ".selector" ).resizable({ aspectRatio: true });

$( ".selector" ).resizable({ autoHide: true });

$( ".selector" ).resizable({ cancel: ".cancel" });

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

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

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

$( ".selector" ).resizable({ distance: 30 });

$( ".selector" ).resizable({ ghost: true });

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

$( ".selector" ).resizable({ handles: "n, e, s, w" });

$( ".selector" ).resizable({ helper: "resizable-helper" });

$( ".selector" ).resizable({ maxHeight: 300 });

$( ".selector" ).resizable({ maxWidth: 300 });

$( ".selector" ).resizable({ minHeight: 150 });

$( ".selector" ).resizable({ minWidth: 150 });

Эта опция имеет тип Selector , jQuery или любой элемент DOM. Он представляет элементы, которые также изменяют размер при изменении размера исходного объекта. По умолчанию его значение равно false .

Опция — также изменить размер

Эта опция может иметь тип Selector , jQuery или любой элемент DOM. Он представляет элементы, которые также изменяют размер при изменении размера исходного объекта. По умолчанию его значение равно false .

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

Селектор — этот тип указывает элементы DOM, которые будут выбраны из документа DOM для изменения размера.

jQuery — функция обратного вызова будет вызываться для каждого изменяемого размера элемента на странице. Эта функция должна возвращать true, если размер элемента изменяется.

Элемент — элемент в объектной модели документа (DOM).

Синтаксис

Этот параметр, если задано значение true , используется для включения визуального эффекта при изменении размера при отпускании кнопки мыши. Значением по умолчанию является false (без эффекта).

Вариант — одушевленный

Этот параметр, если задано значение true , используется для включения визуального эффекта при изменении размера при отпускании кнопки мыши. Значением по умолчанию является false (без эффекта).

Синтаксис

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

Опция — animateDuration

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

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

Число — указывает продолжительность в миллисекундах.

String — Это разделяет именованную длительность, такую ​​как «медленный» или «быстрый».

Синтаксис

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

Опция — animateEasing

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

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

Синтаксис

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

Вариант — aspectRatio

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

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

Boolean — это значение, если установлено значение true , элемент будет сохранять свое первоначальное соотношение сторон.

Число — указывает элемент для сохранения определенного соотношения сторон при изменении размера.

Синтаксис

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

Опция — автоматическое скрытие

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

Синтаксис

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

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

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

Синтаксис

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

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

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

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

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

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

Строка — Возможные значения для этого типа — родитель и документ .

Синтаксис

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

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

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

Синтаксис

Эта опция отключает механизм изменения размера, если установлено значение true . Мышь больше не изменяет размеры элементов, пока механизм не включен, используя изменяемый размер («enable»). По умолчанию его значение равно false .

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

Эта опция отключает механизм изменения размера, если установлено значение true . Мышь больше не изменяет размеры элементов, пока механизм не включен, используя изменяемый размер («enable»). По умолчанию его значение равно false .

Синтаксис

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

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

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

Синтаксис

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

Вариант — призрак

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

Синтаксис

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

Опция — сетка

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

Синтаксис

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

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

Этот параметр представляет собой строку символов, указывающую, какие стороны или углы элемента могут быть изменены. Возможные значения: n, e, s и w для четырех сторон и ne, se, nw и sw для четырех углов. Буквы n, e, s и w представляют четыре кардинальные точки (север, юг, восток и запад).

По умолчанию это значения e, s, se .

Синтаксис

Эта опция используется для добавления CSS-класса для стилизации элемента, который будет изменен. Когда размер элемента изменяется, создается новый элемент <div>, который масштабируется (класс ui-resizable-helper). Как только изменение размера завершено, исходный элемент имеет размер, а элемент <div> исчезает. По умолчанию его значение равно false .

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

Эта опция используется для добавления CSS-класса для стилизации элемента, который будет изменен. Когда размер элемента изменяется, создается новый элемент <div>, который масштабируется (класс ui-resizable-helper). Как только изменение размера завершено, исходный элемент имеет размер, а элемент <div> исчезает. По умолчанию его значение равно false .

Синтаксис

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

Опция — maxHeight

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

Синтаксис

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

Опция — maxWidth

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

Синтаксис

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

Опция — minHeight

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

Синтаксис

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

Опция — minWidth

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

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

Синтаксис

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

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

Перетащите квадратную границу, чтобы изменить ее размер.

Использование одушевленных и призрачных

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

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

Перетащите квадратную рамку, чтобы изменить ее размер и увидеть эффект анимации и опций призрака.

Использование сдерживания, minHeight и minWidth

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

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

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

Использование задержки, расстояния и автоматического скрытия

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

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

Перетащите квадратную рамку, чтобы изменить размер, и вы можете заметить, что —

• Размер первого квадратного поля после задержки составляет 1000 мс,

• Второй квадрат начинает меняться после перемещения мыши на 40 пикселей.

• Наведите указатель мыши на третий квадрат, и появится значок увеличения.

Размер первого квадратного поля после задержки составляет 1000 мс,

Второй квадрат начинает меняться после перемещения мыши на 40 пикселей.

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

Использование также Resize

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

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

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

Использование AspectRatio, Grid

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

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

Перетащите квадратную границу, чтобы изменить ее размер, первый квадрат будет изменен с соотношением сторон 10/3, а второй — с сеткой [50,20].

Метод $ (селектор, контекст) .resizable («действие», params)

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

Синтаксис

$(selector, context).resizable ("action", params);;

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

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

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

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

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

 
var options = $( ".selector" ).resizable( "option" );

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

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

 
var widget = $( ".selector" ).resizable( "widget" );

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

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

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

Синтаксис

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

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

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

Синтаксис

Это действие включает изменение размера элемента. Этот метод не принимает никаких аргументов.

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

Это действие включает изменение размера элемента. Этот метод не принимает никаких аргументов.

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

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

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

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

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

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

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

originalSize — размер, представленный как {ширина, высота}, до изменения размера.

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

размер — текущий размер, представленный как {ширина, высота}.

Синтаксис

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

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

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

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

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

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

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

originalSize — размер, представленный как {ширина, высота}, до изменения размера.

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

размер — текущий размер, представленный как {ширина, высота}.

Синтаксис

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

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

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

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

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

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

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

originalSize — размер, представленный как {ширина, высота}, до изменения размера.

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

размер — текущий размер, представленный как {ширина, высота}.

Синтаксис

пример

В следующем примере демонстрируется использование метода события во время изменения размера. Этот пример демонстрирует использование событий create и resize .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

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

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

JqueryUI — по выбору

jQueryUI предоставляет метод selectable () для выбора элемента DOM по отдельности или в группе. С помощью этого метода элементы можно выбрать, перетаскивая поле (иногда называемое лассо) с помощью мыши над элементами. Кроме того, элементы можно выбирать, щелкая или перетаскивая их, удерживая клавишу Ctrl / Meta, что позволяет выбирать несколько (несмежных) элементов.

Синтаксис

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

Метод $ (селектор, контекст) .selectable (опции)

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

Синтаксис

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

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

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

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

$( ".selector" ).selectable({ appendTo: "#identifier" });

$( ".selector" ).selectable({ autoRefresh: false });

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

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

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

$( ".selector" ).selectable({ distance: 30 });

$( ".selector" ).selectable({ filter: "li" });

$( ".selector" ).selectable({ tolerance: "fit" });

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

Вариант — appendTo

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

Синтаксис

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

Опция — автообновление

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

Опция — фильтр

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

Синтаксис

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

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

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

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

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

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

Синтаксис

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</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>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>

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

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</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>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

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

Попробуйте нажать на продукты, используйте клавишу CTRL, чтобы выбрать несколько продуктов. Вы заметите, что выбор Продукта 1, Продукта 2 и Продукта 3 начинается с задержкой в ​​1000 мс. Выбор Продукта 4, Продукта 5, Продукта 6 и Продукта 7 не может быть сделан индивидуально. Выбор начинается только после того, как мышь переместится на расстояние 100 пикселей.

Использование фильтра

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</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>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
     
      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

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

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

Метод $ (селектор, контекст) .selectable («действие», params)

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

Синтаксис

$(selector, context).selectable ("action", params);;

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

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

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

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

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

var options = $( ".selector" ).selectable( "option" );

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

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

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

var widget = $( ".selector" ).selectable( "widget" );

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

Это действие возвращает значение, связанное с указанным параметром optionName .

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

Это действие возвращает значение, связанное с указанным параметром optionName .

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</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>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );	
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

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

Попробуйте нажать на продукты, используйте клавишу CTRL, чтобы выбрать несколько продуктов. Вы заметите, что продукт 1, продукт 2 и продукт 3 отключены. Выбор Продукта 4, Продукта 5, Продукта 6 и Продукта 7 происходит после того, как мышь отошла на 1 пиксель.

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

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

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

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});

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

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

$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});

$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

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

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

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

Синтаксис

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

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

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

selected — указывает выбранный элемент, который был выбран

Синтаксис

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

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

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

selection — указывает ссылку на элемент, который собирается стать выбранным.

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

unselected — элемент, который содержит ссылку на элемент, который стал невыбранным.

Синтаксис

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

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

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

отмена выбора — элемент, который содержит ссылку на элемент, который должен стать невыбранным.

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</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>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

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

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

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

jQueryUI предоставляет метод sortable () для изменения порядка элементов в списке или сетке с помощью мыши. Этот метод выполняет действие сортировки на основе строки операции, переданной в качестве первого параметра.

Синтаксис

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

Метод $ (селектор, контекст) .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 — это карта пар опций-значений, которые нужно установить.

Синтаксис

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