JqueryUI — Draggable

Метод $ (селектор, контекст) .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.