#157 new

Draggable element should not be altered

Reported by Daniel | January 15th, 2009 @ 12:41 PM

Currently whenever a draggable element has finished it gets returned to it's orginal position (depending on the options) the effect used to return the element causes 3 new style attributes to be added to the element.

I propose that the element should be return as it was taken, this would require taking a copy of the style tag at the start of the effect, then wiping and reapplying the style tag.

E.g. Line 245 of dragdop.js

element.writeAttribute('style', this.style);

Comments and changes to this ticket

  • Jack Casey

    Jack Casey January 15th, 2009 @ 05:33 PM

    • Tag changed from draggable, scriptaculous to draggable, scriptaculous, z-index

    I hit a 'subissue' of this issue, where the zIndex got changed. (from auto to 0). The easy fix seems to be:

    line 330, change: this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0); to this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || "auto");

    PS: This matters because it seems that a main element with zindex null/auto with a child with zindex 2 behaves differently when you set the zindex of the main element to 0. (even though zindex is not meant to be inheritable afaiks).

  • Daniel

    Daniel January 15th, 2009 @ 05:39 PM

    It actually effects 4 css elements:

    Position becomes relative Top gets set to 0px left gets set to 0px z-index gets set to 0

    All these could cause a potential problem with the element.

    Let me know if you would like me to paste my new draggable class implementing what I have suggested.

  • dbostian

    dbostian January 30th, 2009 @ 05:19 PM

    I stumbled across a problem as well. I'd been using "z-index: inherit" on some of my draggables, which (for reasons obvious if you read above) doesn't get properly restored from originalZ.


    I'd changed it from: this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);

    to: var oldZ = Element.getStyle(this.element,'z-index'); var originalZ = oldZ == 'inherit' ? 'inherit' : (oldZ ? parseInt(oldZ) : 0);

    ...however, the 'auto' fix should probably also be implemented: var oldZ = Element.getStyle(this.element,'z-index'); var originalZ = oldZ == 'inherit' ? 'inherit' : (oldZ ? parseInt(oldZ) : 'auto');

    This works with the following initial values: 'auto', 'inherit', any positive or negative integer, or an unset value (though an unset value gets set to 'auto').

    Note that for the z-index property, 'auto' and 'inherit' are essentially interchangeable.

  • Sarah Mercier

    Sarah Mercier March 5th, 2009 @ 04:36 PM

    I am working on Bricolage and this issue has actually been causing us problems. We have a sortable list and within those list elements some of them have popup menus. When they are reordered, if the element that is dragged had a dropdown menu, the dropdown's z-index gets incorrectly set so that it appears behind elements that come after it even though it should still be overtop of them as specified by the z-indexes we have set in the css. If someone could fix this it would be really helpful to us.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket