#55 ✓hold
Kristian Domagala

currentDelta() does not handle proportional position values

Reported by Kristian Domagala | July 23rd, 2008 @ 04:49 AM

The currentDelta() function in the Draggable class (in dragdrop.js) assumes that the top and left styles of the draggable element are pixel values, even if the styles are set as proportional values. For example, "50%" is interpreted as 50px.

This sometimes causes the draggable element to visibly jump at the start of dragging. It can also cause the element to end up in the wrong position position if only one update is detected, ie, releasing the object immediately after starting the drag. (Observed in Firefox & Safari on OSX 10.5).

You might be able to reproduce the problem from the attached example. Note that the problem only occurs the first time you start dragging the element, so you may need to refresh the page and try again a few times if you are unable to observe the problem straight away.

I am unable to suggest a fix, as I don't know enough about how browsers translate proportional positions. However, a starting point would be to detect the unit of the position value in the currentDetla() function before passing it to parseInt().

Comments and changes to this ticket

  • ronin-15560 (at lighthouseapp)

    ronin-15560 (at lighthouseapp) November 20th, 2008 @ 07:50 PM

    • State changed from “new” to “hold”

    For now, please use pixels if you need to specify and initial position -- that said, a patch to fix this behaviour would be welcome.

  • Kristian Domagala

    Kristian Domagala November 30th, 2008 @ 12:35 PM

    We ended up calculating the pixel value at run-time. Unfortunately, I was unable to come up with a suitable patch. Thanks anyway for looking at it.

  • Angus Croll

    Angus Croll September 23rd, 2010 @ 08:17 PM

    • Importance changed from “” to “”

    This patch works well for me in all browsers

      currentDelta: function() {
        var leftStyle = Element.getStyle(this.element,'left') || "";
        var topStyle = Element.getStyle(this.element,'top') || "";    
        if (leftStyle.include('%')) {
          leftStyle = (this.element.parentNode.getWidth() * parseInt(leftStyle))/100;
        if (topStyle.include('%')) {
          topStyle = (this.element.parentNode.getHeight() * parseInt(topStyle))/100;
          parseInt(leftStyle) || '0',
          parseInt(topStyle) || '0']);
    //    return([
    //      parseInt(Element.getStyle(this.element,'left') || '0'),
    //      parseInt(Element.getStyle(this.element,'top') || '0')]);

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