My Web Training

📖 jQuery UI Interactions and Effects

Draggable

Allows the user to move an element around a web page
See an example in the jQuery UI developer docs
Apply the draggable widget to the selected element
```
$('selector').draggable();
```

Add options as an object literal inside the parenthesis:

$('selector').draggable({
	 cursor: 'pointer',
	 helper: 'clone'
});

Add event handlers

$('selector').draggable({
	start: function(event, ui) {
		ui.helper.css('transform','scale(2)');
	}
});

Droppable

Allows the user to drop a draggable element into the element
See an example in the jQuery UI developer docs
Apply the droppable widget to the selected element
```
$('selector').droppable();
```

Add options as an object literal inside the parenthesis:

$('selector').droppable({
	accept: '.dragItem',
	hoverClass: 'hoverDrop'
});

Add event handlers

$('selector').droppable({
	drop: function(event, ui) {
		ui.helper.hide('explode');
	}
});

Sortable

Allows the user to sort a collection of elements
See an example in the jQuery UI developer docs
Apply the sortable widget to the container element of the elements to be sorted
```
$('selector').sortable();
```

Add options as an object literal inside the parenthesis:

$('selector').sortable({
	cursor: '.crosshair',
	handle: 'h2'
});

Add event handlers

$('selector').sortable({
	create: function(event, ui) {
		ui.helper.css('opacity','.5');
	}
});

jQuery UI Effects

animated visual effects that can be added to an element
See an example in the jQuery UI developer docs
can be added to functions: show(), hide(), toggle(), effect()
can add easing functions as well (see https://api.jqueryui.com/easings/)

Example:

$('#selector').click(function() {
	$(this).effect('bounce', {
		distance: 100,
		times: 20,
		easing: 'easeOutBounce'
	}, 1000);
});

Interaction Effects

blind: Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode .

bounce: Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.

clip: Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.

drop: Shows or hides the element by making it appear to drop onto, or drop off of, the page.

explode: Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.

fade: Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.

fold: Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.

highlight: Calls attention to the element by momentarily changing its background color while showing or hiding the element.

puff: Expands or contracts the element in place while adjusting its opacity.

pulsate: Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.

scale: Expands or contracts the element by a specified percentage.

shake: Shakes the element back and forth, either vertically or horizontally.

size: Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.

slide: Moves the element such that it appears to slide onto or off of the page.

transfer: Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for the ui-effects-transfer class, or the class specified as an option.

Draggable and Droppable Example