Search code examples
javascriptjquerydraggable

Specifying when to drag a draggable div

Is it possible to make a div draggable and say that the div should only be dragged when the user clicks on a specific element within that div? I have a draggable div with a header element. I want dragging to happen only when the element is clicked.

Here is the javascript where I make the div draggable.

<script>
$(function() {
    $( "#edit" ).resizable();
    $( "#edit" ).draggable();
});
</script>

Here is the HTML for the div

<div class="demo">

<div id="edit" style="position:absolute; width: 250px; height: 550px;" class="comdiv">
    <h3 class="comhdr ui-widget-header">Sample</h3>

        <p id="heading" class="editableText ui-widget-content">Text for edits.</p> 

</div>

</div><!-- End demo -->

http://jsbin.com/awihej/2/edit

Solution

  • You can use the handle option:

    $("#edit").draggable({
    handle: "h3"
});

    Or maybe:

    $("#edit").draggable({
    handle: ".ui-widget-header"
});