Draggable elements script -- acting strange when positioned.

[shachi]

1) Script Title: Draggable elements script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/image3.htm

3) Describe problem: Whenever I try to position any element with top/left properties(with css, not javascript) the element jumps back to top: 0px and left: 0px

Does anyone have any idea why it is acting so strange??

Thank you for your time and interest in this post.

[shachi]

Hello?? Any help here??

[jscheuer1]

Any idea, yes. The script itself relies upon absolutely positioning the dragable elements, which it needs total control over in most cases. Style properties in css stylesheets become an element's new defaults, this could often confuse the script, both stylesheet and inline style would distort how the script understands the element's original position on the page.

[shachi]

Thanks a lot for telling me what was happening but how do I fix this?

[jscheuer1]

Well, I did say:

Any idea, yes.

It would be easiest if you just used the script as intended. If there is any way you can have it do what you want without using whatever styles mess it up, that would be easiest. Often, designers resort to placing elements on a page with absolute or relative positioning when simple margins or padding would suffice.

There is a mod of this script in the forums here that can pluck a dragable item out of a scrollable div but the item itself is still positioned normally, allowing the script to take full control of its position properties. That's what dragging is, taking full control of an element's position. If you could write a routine that would cancel out the element's style after determining what its static position would have been, you could probably use that. Getting stylesheet style is problematic though.

[shachi]

jscheuer1: I tried changing it's position to absolute, but still it is behaving same. I tried to change it's stylesheet declarations but unfortunately I have no idea how to do that. Any other fixes for this?

Should I create a sub-division for each element and position the sub-division?

[jscheuer1]

Don't use any position property, either inline or in its stylesheet entry(s) (if any) for the element to be dragged other than that (if any) required by the script.

Also, as I recall, without modification this script cannot handle elements that are within other elements that have absolute or relative positioning.

[shachi]

Thanks jscheuer1, I finally fixed it by simply adding these line:

this.targetobj.style.left = parseInt(this.targetobj.offsetLeft);
this.targetobj.style.top = parseInt(this.targetobj.offsetTop);

Thanks again.

[jscheuer1]

Cool.

[shachi]

jscheuer1: ok the problem is fixed but is there anyway that I can set limits to the element?