Search the Community
Showing results for tags 'draggables snap'.
Found 1 result
-
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