jQuery UI & Draggable: Handles

This entry is part 10 of 11 in the series jQuery UI Draggable

jQuery UI Draggable – Handles

Handles allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to “cancel” draggable functionality.

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Handles</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://codecrawl.com/code/jqueryui/jqueryui_style.css">
        #draggable, #draggable2 {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;

        #draggable p {
            cursor: move;
        $(function () {
            $("#draggable").draggable({ handle: "p" });
            $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
            $("div, p").disableSelection();

<div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">I can be dragged only by this handle</p>

<div id="draggable2" class="ui-widget-content">
    <p>You can drag me around…</p>

    <p class="ui-widget-header">…but you can't drag me by this handle.</p>

Try The Code
Series Navigation<< jQuery UI & Draggable: Snap To Element Or Grid
jQuery UI & Draggable: Cursor Style >>

Leave a comment

Leave a Reply