I am facing a challenge with a parent div (such as "#strip17") that contains multiple child divs. Most of these child divs consist of a canvas where the user can draw using their mouse. However, the last child div should act as a handle that allows the user to drag the parent div around.
The entire parent div should be draggable, so users can grab the drag-child and move it wherever they need. I am looking for a way to create a handle for dragging the parent div as a whole.
The issue I am encountering is that I can only apply the .draggable() function to either the parent or the drag-child div. If I apply it to the parent div, drawing on the canvas elements is disabled as it is interpreted as dragging. On the other hand, if I apply it to the drag-child div (".camber-move"), only that specific div moves while the rest of the parent div remains static but drawable.
I believe it is possible to make the parent div draggable by applying .draggable() to ".camber-move" and somehow instructing jQuery-UI to move both the ".camber-move" div and its parent "#strip17". But I am unsure how to achieve this.
// '#<newStripID>' represents the ID of the new parent element
// '#<newStripID> .camber-move' refers to the ID of the element that should act as the drag handle
$('#' + newStripID).draggable({
"containment": "#content"
});
html:
<div id="strip17">
<div class="strip-camber-1"><canvas></canvas></div>
<div class="strip-camber-1"><canvas></canvas></div>
<div class="strip-camber-1"><canvas></canvas></div>
<div class="strip-camber-1"><canvas></canvas></div>
<div class="camber-move"></div>
</div>