jQuery UI Interactions

Contact Us or call 1-877-932-8228
jQuery UI Interactions

Interactions

jQuery UI offers the following interactions, which are ways to add mouse-based behaviors to elements:

jQuery UI Interactions
Behavior Explanation Code
Draggable Enable draggable functionality on any element $("#draggable").draggable();
Droppable Create a target for a droppable element $('#droppable').droppable({ drop: function(event, ui) { $(this) .addClass('dropped') .find('h2') .html('Dropped'); } });
Resizable Change the size of an element with the mouse $('#resizable').resizable();
Selectable Select one or more elements with the mouse $('#selectable').selectable();
Sortable Reorder elements with the mouse $('#sortable').sortable();

We will use an example to review each of the interactions. Open the file jqy-mobile-ui/Demos/jquery-ui-interactions.html in a browser and in an editor to view the code. The page displays five areas to illustrate each interaction:

jQuery UI Interactions

Code Sample:

jqy-mobile-ui/Demos/jquery-ui-interactions.html
---- C O D E   O M I T T E D ----

	<script>
		$(document).ready(function() {
			$('#draggable').draggable();
			$('#droppable').droppable({
				drop: function(event, ui) {
					$(this)
					.addClass('dropped')
					.find('h2')
					.html('Dropped');
				}
			});
			$('#resizable').resizable();
			$('#selectable').selectable();
			$('#sortable').sortable();
		});
	</script>
	<style>
		.container {
			width:30%;
			margin:0 1% 1% 0;
			float:left;
			height:200px;
			background-color:#fbb;
			padding:1%;
		}
		.widecontainer {
			width:98%;
			margin-bottom:1%;
			clear:left;
			background-color:#fbb;
			height:100px;
		}
		.contained {
			width:90px;
			height:90px;
			padding:10px;
			background-color:#c00;
		}
		h3 {
			float:right;
			font-size:14px;
			font-weight:bold;
			color:#444;
			margin:5px 5px 0 0;
		}
		.dropped {
			background-color:#fff;
		}
		ul {
			list-style:none;
			margin:0;
			padding:0;
		}
		ul li {
			float:left;
			margin:20px 10px 0 10px;
			padding:5px 15px;
			background-color:#c00;
		}
		#selectable .ui-selecting {
			background-color: #600;
		}
		#selectable .ui-selected {
			background-color: #000;
			color: white;
		}
	</style>
</head>
<body>
<div id="draggablecontainer" class="container">
	<h3>Draggable</h3>
	<div id="draggable" class="contained">Drag Me</div>
</div>
<div id="droppable" class="container">
	<h3>Droppable</h3>
	<h2>Drop Here</h2>
</div>
<div id="resizablecontainer" class="container">
	<h3>Resizable</h3>
	<div id="resizable" class="contained">Resize Me</div>
</div>
<div id="selectablecontainer" class="widecontainer">
	<h3>Selectable</h3>
	<ul id="selectable">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
		<li>Four</li>
		<li>Five</li>
		<li>Six</li>
		<li>Seven</li>
		<li>Eight</li>
		<li>Nine</li>
		<li>Ten</li>
	</ul>
</div>
<div id="sortablecontainer" class="widecontainer">
	<h3>Sortable</h3>
	<ul id="sortable">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
		<li>Four</li>
		<li>Five</li>
		<li>Six</li>
		<li>Seven</li>
		<li>Eight</li>
		<li>Nine</li>
		<li>Ten</li>
	</ul>
</div>
</body>
</html>

The upper-left and upper-right of the page shows two red divs ("Drag Me" and "Resize Me"); each is about 100px on a side. The user can drag the upper-left square with the mouse to any position on the page - the code $('#draggable').draggable() enables this functionality.

Dropping the left square into the "Drop Here" area changes the color and title of the 'dropzone'; this is the code starting with $('#droppable').droppable, where we add a class to the div and change the html of the h2.

We set the upper-right div to be resizable with $('#resizable').resizable(). Note the pull bars on the lower right corner of the element; these derive from the jQuery UI CSS file, jqy-libs/ui-lightness/jquery-ui-1.10.3.custom.min.css

We set the unordered list in the next-to-last, full-width div to be selectable with $('#selectable').selectable(): the user can select one or more elements with the mouse by pressing and holding on the Command key (for Macs) or Control (for Windows).

Lastly, we enable sortable functionality on the bottom set of elements (also an unordered list) with $('#sortable').sortable(); the user can drag elements with the mouse to sort them.

Next