Decouple UI elements from DOM to drag them independently

Question

I have made all elements on a webpage draggable with jquery UI.

<div style="width:150px;height:120px;border:1px solid red;background-color:#F0F0F0">
    <span style="background-color:yellow">Drag me</span>
    <span style="background-color:red">Drag me</span>
</div>
<script>
$('*').draggable();
</script>

http://jsfiddle.net/m723rf2t/

I can move the two spans outside of their bounding box. However, when I drag the bounding box, the two span elements also get moved (because they are children of the DOM element that's being dragged).

Is there a way to "decouple" all DOM elements, so that I could drag them independently, without the parent having any influence on the children (other than the style that is inherited)?

Restructuring the site is not an option.

Answer 1

Well, the bounding box shouldnt be a parent of the dragged object, but a sibling. Is the bounding box supposed to contain the children ?, or is it supposed to "draw" the outline of the dragged elements?

One way to drag the items separatedly in your example is below ( but it most likely doesnt actually suit for your actual site )

Demo fiddle

and code

<div style="width:150px;height:120px;border:1px solid red;background-color:#F0F0F0;position: fixed;">
    <span style="left: 14px; top: 14px;background-color:yellow;position: fixed;">Drag me</span>
    <span style="left: 14px; top: 14px;background-color:red;position: fixed;margin-left: 80px">Drag me</span>
</div>

$('*').draggable();

Answer 2

For the parent that you don't want to drag, you can do some individual selectors on the child elements to prevent dragging of the parent:

$('*').draggable();

$('#some-child').draggable({cancel: '#some-parent'});

However, that will initialize draggable multiple times on some selectors.

What you should probably do it something like this:

$('*').not('#specific-child').not('#other-specific-child').draggable();

$('#some-child').draggable({cancel: '#some-parent'});

Or you could create an array of children you don't want, and loop through.

See the jQuery UI docs for draggable cancel.