Search code examples
javascriptjquerycssjquery-uidraggable

How can I use an inner div to drag it's outer parent div?

I would like to be able to move an outer div by dragging a specific inner div. Only that inner div should be able move the outer div.

I have attempted to use Jquery's draggable() method on the out div but this lets the user move the outer div by clicking and dragging anywhere inside the outer div, which prevent's a user highlighting some text for copying.

I have setup a jsFiddle here.

How can I make the outer div only draggable when clicking and dragging on a specific inner div?

Solution

  • Add a handle option

    handle
    If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the draggable element are permitted.

    $("#outer").draggable({
    handle: "#inner"
});

    JSFiddle