draggable cancel not working

draggable cancel not working

hi everybody

so I have been trying to make a div draggable. at the same time,
the nodes (SVG <rect> elements in the div) should not be draggable (they are already draggable through
another library, graffle)

why? because it's a graph and it can potentially get huge. check it
out here: http://kumin.ch/CANDis/








I have used "cancel" property for "rect.CANDisElement" and every <rect> element has class="CANDisElement".

looks like this:

output of SVG:
  1. <rect class="CANDisElement" x="620.9879411213087" y="199.85729269429794" width="100" height="100" r="8" rx="8" ry="8" fill="#bf0000" stroke="#bf0000" fill-opacity="0" stroke-width="2" style="cursor: move;"/>
and in index.html:
  1. $("#canvas").draggable({ cancel: "rect.CANDisElement" });

Expected Behavior: dragging the white canvas drags the div. dragging on a node doesnt drag the div
Actual Behavior: dragging the node does also drag the div

important: i think this might be a bug because changing "cancel" to "handle" gives the expected behavior: the div is only dragged if I drag a node but not if I drag the white canvas (as seen here: http://kumin.ch/CANDis/index2.html )

what do you guys think? is it a bug or am I doing it wrong?

Thank you for your time,
Tony

PS:
further reading:

i've read this which didnt bring me further http://forum.jquery.com/topic/how-do-i-prevent-dragging-when-a-button-is-clicked-within-the-draggable-container

this seems to be a bug in Cancel but i dont think it's the reason for my problem: http://forum.jquery.com/topic/cancel-attribute-in-draggable-call