0

I added some drag-able object to my code, there is problem with containment. In chrome, the objects can move to out side off the div o the containment not working

Here is my sample URL: Circle Dagger

(this happens when you drag object to end of right side, then drag another object to right side it can move beyond the div) help me please

Dave Clemmer
  • 3,741
  • 12
  • 49
  • 72
Suneth Kalhara
  • 1,211
  • 6
  • 20
  • 40
  • you really should add a doctype, without one i don't think this will work in all browsers. It actually seems to work correctly for me in Chrome but not in Ie ( if i manually exit quirks mode. in quirks mode it doesn't work at all, not draggable ) – Kevin B Jun 07 '12 at 19:09
  • now i added still bad there – Suneth Kalhara Jun 07 '12 at 19:12
  • when you drag object to end of the right side, then drag another object end the right side, you can drag this beyond the div – Suneth Kalhara Jun 07 '12 at 19:14
  • I noticed that the `svg` element you have in there overflows outside of the container as well. Is that expected? I don't see what that would have to do with the balls overflowing, but maybe its a clue? – lbstr Jun 07 '12 at 19:22
  • svg used for adding line between balls :)(this lines generate with plumbjs framework), is there a solution for get this pain – Suneth Kalhara Jun 07 '12 at 19:28
  • I do what is happening, but i don't know why. when you drag an object to the container edge, the constraint is growing in width or height (based on which edge) exponentially. – Kevin B Jun 07 '12 at 19:32
  • remove the plumbjs functionality to confirm it isn't interfering – Kevin B Jun 07 '12 at 19:36
  • removed, now wring fine, bt i need lines ;) – Suneth Kalhara Jun 07 '12 at 19:41

2 Answers2

2

Add overflow: hidden to div.wraproundx.

The plumb lines created by the jsPlumb plugin create svg elements that overflow past the bounds of the container. Apparently, there is an issue with Chrome and jQuery UI in this regard, so you must set overflow: hidden.

lbstr
  • 2,822
  • 18
  • 29
0

try to use this as containment

[
    $('#id'+randID).offset().left, 
    $('#id'+randID).offset().top,
    $('#id'+randID).offset().left+616,
    $('#id'+randID).offset().top+50
]

instead of containment: $('#id') and adjust by replacing (616) and (50), it works fine on chrome and FF

Parris
  • 17,833
  • 17
  • 90
  • 133
Nassim Aouragh
  • 1