How to Use jQuery UI Interactions

A jQuery interaction is a widget that enables page visitors to use a mouse (or trackpad or touchscreen) to control, modify, or in some other way mess with a web page element. For example, on this Web Design Playground site, one of the jQuery UI interactions is used to enable coders to use a mouse to resize the width and height of the editors and other windows.

Applying a jQuery interaction

Before you look at the available interactions, take a look at the general syntax you use to apply one to an element:

$(<em>selector</em>).<em>interaction</em>(<em>options</em>|<em>events</em>);

• selector: A jQuery selector that specifies the web page element you want to work with.

• interaction: A string that specifies the name of the jQuery UI interaction you want to apply to the element.

• options|events: An object literal that includes one or more property-value pairs that specify the interaction options you want to use, and one or more interaction events you want to handle. Both the available options and the available events vary depending on the interaction.

For example, the following statement applies jQuery UI’s resizable widget with two options that specify the element’s minimum width and minimum height, as well as a handler for the widget’s resize event, which fires when the element gets resized:

$('#my-div').resizable(
  {
    minWidth: 40,
    minHeight: 50,
    resize: function(event, ui) {
      console.log(ui.size.width);
    }
  }
);

In the event handler, the event argument refers to the event itself, whereas the ui argument refers to user interface object that the page visitor is interacting with. Most of the interaction widgets offer both start and stop events, which fire when the interaction begins and ends, respectively.

Trying out jQuery interactions

Here's a quick look at the available interactions offered by jQuery UI:

• draggable: Enables the user to move an element using a mouse. You can constrain the dragging to a particular direction by setting the axis property to either x (horizontal dragging only) or y (vertical dragging only). You can also set the transparency of the element while it's being dragged by setting the opacity property to a number between 0 (invisible) and 1 (fully visible). To run code while the element is dragged, create a handler for the drag event.

$('#my-div').draggable(
  {
    axis: 'x',
    opacity: .5,
    drag: function(event, ui) {
      console.log(ui.position.left);
    }
  }
);

• droppable: Sets up an element as the target of a drag-and-drop operation. That is, if you apply the draggable widget to element A and the droppable widget to element B, the user can drag element A and drop it on element B. You can specify how much of the draggable element must overlap the droppable element before it is considered “dropped” by using the tolerance property set to one of the following: fit (complete overlap is required; this is the default); intersect (50 percent overlap required); pointer (the mouse pointer must be inside the droppable; or touch (any overlap will do). To run code when the element is dropped, create a handler for the drop event.

$('#my-div').droppable(
  {
    tolerance: 'intersect',
    drop: function(event, ui) {
      console.log('Dropped it!');
    }
  }
);

• resizable: Enables the user to resize an element using a mouse. You can specify which directions the user can resize the element by adding the handles property, which is a comma-separated string consisting of one or more of the following directions: n, e, s, w, ne, se, sw, nw, and all. You can set limits on the element's dimensions (in pixels) by using the maxHeight, minHeight, maxWidth, and minWidth properties. To run code while the element is resized, create a handler for the resize event.

$('#my-div').resizable(
  {
    handles: 'e, se, s',
    minWidth: 50,
    minHeight: 25,
    resize: function(event, ui) {
      console.log(ui.size.width + ' ' ui.size.height);
    }
  }
);

• selectable: Enables the user to select elements using a mouse. The user can either “lasso” the elements by using the mouse to drag a box around them, or the user can hold down either Ctrl (Windows) or ⌘   (Mac) and then click each element. You can specify how much of the lasso must overlap an element before it is considered “selected” by using the tolerance property set to either of the following: fit (complete overlap is required; this is the default), or touch (any overlap will do). To run code after each element is selected, create a handler for the selecting event.

$('#my-div').selectable(
  {
    tolerance: 'touch',
    selecting: function(event, ui) {
      console.log(ui.selecting.innerText);
    }
  }
);

• sortable: Enables the user to change the order of elements using a mouse. You can constrain the sort movement to a particular direction by setting the axis property to either x (horizontal sorting only) or y (vertical sorting only). You can also set the transparency of the element while it's being sorted by setting the opacity property to a number between 0 (invisible) and 1 (fully visible). To run code while an element is being sorted, create a handler for the sort event.

$('#my-div').sortable(
  {
    axis: 'y',
    opacity: .5,
    sort: function(event, ui) {
      console.log(ui.item[0].innerText);
    }
  }
);