DOM Drag: limit to within a range, not extending past edge

[djr33]

1) Script Title: DOM Drag & Drop script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag/

3) Describe problem:
When I set a limit, the limit works but it is relative to the top left corner of the object. This means that the object can extend to up width-1 and height-1 off the bottom and/or right of the container I'm trying to use.

It is possible to avoid this by simply using a smaller range based on the known width of the object, but if this object is ever to change width for some reason, or even just be possibly variable width based on how much content it contains, this becomes more difficult.

Is there a way to adapt this to restrict the movement of the object to remaining inside a range, rather than to allowing extension beyond the bottom and right edges?

I've looked through the script, but there is a lot of logic and indirect code in the part that controls this, so I'm not sure how to modify it while not unintentionally changing something crucial.

It is possible to view a test page here, but I believe this is a problem (or feature?) with the system, not my installation.
http://ci-pro.com/iv/dragtest.php


Aside from this, the script is perfect for my current needs.

[ddadmin]

I'm not sure I understand the question entirely. Are you asking how to keep the draggable box completely within the purple area, so it can never spill over to the outside? If so, why not just decrease the maxX and maxY values from what you have now, so:


Drag.init(myhandle,myroot,0,440,0,240);

[djr33]

Yes, that is correct and works as a temporary patch, but because the size of the object may differ (many lines of text, or an unexpectedly large image, etc.), using that method is limited. It only works if you use a constant pixel size for every dragable element.

I think this should be the default behavior, not that I'm saying it would be easy to program.

Consider any sort of "physics" based example, such as a pool table. The balls wouldn't be able to hang off the edges of the table, but rather would need to stay within the table. Even a scrollbar like in the examples is confusing, because rather than a 300px range, you would specify 250px if your scrollbar is itself 50px, rather than 300px to match it's scrolling div.
Of course it's easy to work around this using that method, but if you have elements that are an unpredictable size, it would need to be determined as part of the drag action, at the time of dragging.


At the very least, I'd like to know the best way to determine the object's size so that I can do:

Drag.init(myhandle,myroot,0,500-objw,0,300-objh);
It is unlikely that the object's size will change during the dragging process, though that's always a possibility too. At least dynamically determining the width/height compensation like that would make it work in almost all cases, though again I'm not sure why this is not part of the original script.

[ddadmin]

Hmm something like:


Drag.init(myhandle,myroot, 0, 500-myroot.offsetWidth, 0, 300-myroot.offsetHeight);

would dynamically subtract the dimensions of the draggable box from maxX and minY in the above function.

There is also the onDrag event, which unlike onDragEnd is run while the object is being dragged, not after. It may come in handy depending on what you're trying to do as well...

[djr33]

I'm trying to setup a map where users can place things. And obviously it's a problem if they are placed off the map.
That's all, and I think using the offset method above will probably work for most situations, though if something like Ajax were implemented on the moveable div (such as a modal window) and it still needed to stay in place (such as within the window, rather than forcing the window to expand), then a constant onDrag check would be important.

I've added the code to my page and it works perfectly. I think this will be all that is needed for my case, though this might be something to consider for any updates to the script.

Thanks.