Drag the child and parent together
I have a div structure as shown below.
<div id="wrapper">
<div id="innerWrapper">
<div id="obj"></div>
</div>
</div>
I am currently using jQuery draggable to move a div around.
jQuery('#obj').draggable();
Now I'm in a situation where I need to drag #wrapper
by drag #obj
. How can i do this? So basically I want to drag #obj
and drop as well #wrapper
.
When i do this
jQuery('#wrapper').draggable();
It does not respond very well to touch devices, possibly because it #obj
overlaps#wrapper
source to share
You can use the descriptor option in the dragged ui , which allows you to restrict the parent process to dragging if this does not happen on the specified element (s) in the child case.
For your code, you can:
jQuery( "#wrapper" ).draggable({ handle: "div#obj" });
For code link: http://jsfiddle.net/xBB5x/8862/
Library link: http://jqueryui.com/draggable/#handle
source to share