Question

I have run into a pretty weird problem that I have managed to fix, but in a disgusting way.

I have the following working code that grabs the left and top of the element (using MooTools). It then uses setStyles to copy these measured coordinates into the style attribute. This works pretty well.

But as soon as I set the position to absolute the values in the code above it appear to change.

Works but horrible:

var Sortable = new Class({
    initialize: function(element, container) {
        // Store the element and its settings
        this.element = element;
        this.size = element.getSize();
        this.position = element.getPosition(container);

        // Set the position
        element.setStyles({
            left: this.position.x,
            top: this.position.y
        });

        setTimeout(this.goAbsolute.bind(this), 0);
    },
    goAbsolute: function() {
        this.element.setStyle('position', 'absolute');
    }
});

As you can see, I am using a timeout to separate the left / top setting and the position setting. The following code does not work.

var Sortable = new Class({
    initialize: function(element, container) {
        // Store the element and its settings
        this.element = element;
        this.size = element.getSize();
        this.position = element.getPosition(container);

        // Set the position
        element.setStyles({
            left: this.position.x,
            top: this.position.y,
            position: 'absolute'
        });
    }
});

So, we can use this.

this.size = element.getSize();

And size.x will equal 100 for example. Then with this added line.

this.size = element.getSize();
element.setStyle('position', 'absolute');

size.x will now equal 0. Even though it was set to absolute after.

I have tried cloning the object and its values.

I have tried putting them all out of scope of each other.

Nothing seems to work.

Does anyone know of a way to do a similar fix but without setTimeout? Or is that the best way.

I have tried to explain my problem as best as I can but it is a bit of a strange one. So comment with any questions.

Thank you for any suggestions you may have.

Answer 1

I’m reasonably sure (I’m not certain because you didn’t mention float: left) that you’re having the same problem as in this question, which I answered thoroughly.

In short, you need to firstly set top and left on all the elements. After doing that, then set position: absolute on all the elements.