Draggables snap back to their origin rather than to an x-y position

[DTSchaefer]

I have an application where I pull in a number of pictures from a database via Ajax and then make them draggable. I'd like to drag them to a different location using throwProps and snap. So when I provide x and y positions for them to snap to (snapping them into a template with specific x-y locations), they snap into a position RELATIVE to their starting position, rather than to an absolute position with respect to their bounding DIV element.

 

The draggables get set up asynchronously within an Ajax post as follows:

 

 

    $.post('/listproducts',queryProduct,function(data){

        // Populate the drag-from window with up to 16 products

        var products = data['products']; // array

        var html = '';

        for (var p = 0; p < products.length; p++) {

            html += '<div class="product_drag" id="' + products[p]['id'] + '">';

            html += '<img src="/images/products/' + products[p]['image'] + '">';

            html += '</div>';

        }

        $('#lookbook_select_box').html('');

        $('#lookbook_select_box').append(html); 

        // Now make all items draggable

        Draggable.create(".product_drag",{

            edgeResistance: 0.65,

            type: "x,y",

            throwProps: true,

            bounds: '#lookbook_drag_box', // this is a static DIV element on the page

            snap: {

                x: function(endValue) { return 0;},

                y: function(endValue) { return 0;}

            }

        });

    },'json');

 

As you can see, I try to get the draggables to snap back to 0,0, which I would think would be the bounding DIV element's (#lookbook_drag_box) origin; however, they just snap back to their own origin.

 

I'm sure the answer is obvious, but I just can't see it. Is it because I'm executing the function asynchronously out of an Ajax call-back?

 

Any help appreciated. Thanks!

Dan

 

[GreenSock]

It sounds like you may just be misunderstanding what "x" and "y" refer to in the context of the DOM and CSS. Those are for CSS transforms, and map to the "translateX()" and "translateY()" components of the official CSS spec. Think of CSS transforms as always being relative to where that element would normally sit in the flow of the document (with no transforms applied). So in a sense, x and y are like offsets. It sounds like you were expecting them to be absolute measurements from the origin of the parent (kinda like in Flash), but that's not the case. 

 

You could set their position:absolute and their parent's position to relative or absolute so that they're all starting out at the top left of the parent, and use that as if it's the origin to get a consistency. 

 

Does that clear things up at all? 

[Rodrigo]

Hi Dan and welcome to the GreenSock forums.

 

This is an expected behaviour in CSS transforms. You'll see when the document originally renders (even before GSAP can change anything) every elements x and y transform position is zero, unless a value is indicated in a stylesheet or an inline style. So whe you drag and throw them using a "x,y" Draggable instance, when they return those values to zero, they go back to the place where they were rendered after the ajax callback.

 

An alternative would be to use jQuery's position() method in order to get their position relative to it's parent element and use the top and left values with a negative sign to snap the y and x respectively.

 

Also you'd have to consider if your elements have a relative or absolute position in order to see how they are positioned originally after the ajax callback, because right now the document's flow is taking care of that.

 

Finally a reduced live sample could really help us to identify the issue, so if you can please create one in codepen:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[DTSchaefer]

All,

 

Thanks for the replies. You answered my question perfectly. I'd completely forgotten about using absolute positioning. I was proud of myself for having all the pictures flow so neatly out of the database and into the target area, forgetting that I was relying on position:relative. So of course, returning to 0,0 put me right back into the natural location as per position:relative.

 

Thanks again,

Dan