Interaction Helpers
Draggable
The draggable interaction turns an element into something the user can pick up and move around the page with the mouse or touch, without you having to manually track mouse events and update position yourself.
Example: Draggable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:80px;height:80px;background:lightblue">Drag me</div>
<script>
$("#box").draggable();
</script>
</body>
</html>Droppable
The droppable interaction creates a target area that accepts draggable elements, and it can run a callback when a compatible item is dropped onto it. Combined with draggable, this is the foundation for drag-and-drop interfaces like a kanban board or a file upload zone.
Example: Droppable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="drop" style="width:150px;height:150px;border:2px dashed gray">Drop here</div>
<script>
$("#drop").droppable({
drop: function() { console.log("Item dropped"); }
});
</script>
</body>
</html>Resizable
The resizable interaction lets users change the size of an element by dragging its edges or corners, which is especially useful for panels, dialogs, and text areas where users benefit from adjusting the available space themselves.
Example: Resizable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:100px;height:100px;border:1px solid black">Resize me</div>
<script>
$("#box").resizable();
</script>
</body>
</html>Selectable and Sortable
Selectable lets users click and drag to select multiple items from a group, similar to selecting files in a desktop file browser. Sortable lets users reorder a list by dragging items into a new position, which is common in to-do lists and priority rankings.
Example: Selectable and Sortable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li><li>Item 2</li></ul>
<script>
$("#list").selectable();
$("#list").sortable();
</script>
</body>
</html>Small Interaction Project
These interactions become significantly more useful when combined — a draggable item that can be dropped into a droppable target, or a sortable list where individual items are also resizable — letting you build genuinely rich interfaces from a handful of building blocks.
Example: Small Interaction Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="drag" style="width:60px;height:60px;background:lightgreen">Drag</div>
<div id="drop" style="width:150px;height:150px;border:2px dashed gray">Drop</div>
<script>
$("#drag").draggable();
$("#drop").droppable();
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: