[RESOLVED] Drag + Drop : (fairly urgent help needed pls)

[dougal85]

I've got a JavaScript object that controls a div, in relation to it;

When initialised, the object creates the div in a parent div and makes itself draggable with the code below.

However, if i make a second instance ... the first div cannot be dragged but the second can. then a third added means the second doesnt work either but the third does. So i'm thinking its over-riding something each time... but i'm not sure where, or what.

...

// this.divId = the ID of the div
// this.hand = id of span in the div, drag handle

this.makeDraggable = function(){

qb.log.add("Adding Drag");

new Draggable(this.divId,{
    snap: function(x,y,draggable) {

        function constrain(n, lower, upper) {
            if (n > upper) return upper;
            else if (n < lower) return lower;
            else return n;
        }

        element_dimensions = Element.getDimensions(draggable.element);
        parent_dimensions = Element.getDimensions(draggable.element.parentNode);
        return[
        constrain(x, 11, parent_dimensions.width - element_dimensions.width + 9),
        constrain(y, 11, parent_dimensions.height - element_dimensions.height + 9)];

    },

    scroll:window,
    handle:this.hand,
    zindex:9,
    revert:false
});

}

..

[severeheadache]

dougal85,

It has been a while since I used script.aculo.us, so let me access that long term memory real quick ...

Ok, I can not see all the code above this but, it looks like you are extending the DIV element by adding a makeDraggable() method? I think this is realated to the way prototype works.

for grins, try this:

function makeDraggable( strDivId )
{
    qb.log.add( "Adding Drag" );

new Draggable( strDivId,
{
    snap: function(x,y,draggable)
    {
        function constrain(n, lower, upper)
        {
            if (n > upper) return upper;
            else if (n < lower) return lower;
            else return n;
        }

        element_dimensions = Element.getDimensions(draggable.element);
        parent_dimensions = Element.getDimensions(draggable.element.parentNode);
        return[
        constrain(x, 11, parent_dimensions.width - element_dimensions.width + 9),
        constrain(y, 11, parent_dimensions.height - element_dimensions.height + 9)];

    },

    scroll:window,
    handle:this.hand,
    zindex:9,
    revert:false
});

}

then instead of saying

$( 'myDiv' ).makeDraggable();

you would:

makeDraggable( 'myDiv' );

I know I am not really solving your problem, but it will show then if this is a problem in the way you are using your prototypal objects. If this works, then that means you need to change your object declaration. maybe you have a factory that you pass in the div object and then it "attaches" these methods to them like so:

function makeSuperDiv( $objPlainDiv )
{
     // Since $objPlainDiv is it's own dom element, we can attach behaviors to
     // it without affecting every div element and have the master object problem
     $objPlainDiv.makeDraggable = function () { ... all your other code };
}

Dunno, I am shooting off the cuff, but maybe it will spark some genius in you and you can find a real solution.

-Mike

[dougal85]

Thanks, i'll give that a shot... any help is appreciated.

However, i am going away on holiday so not near my PC. However, I will try it when i get back and let you know how i get on.

Thanks for taking the time to write that.

Dougal