6

Does anyone know if it is possible to drop a draggable element into gridster? http://gridster.net/#documentation

It seems great for my purposes, but can you add them to the grid by dropping it?

I want to drag images into gridster. Is is possible? Can I see a sample of this?

If this is not possible, do you know of any alternatives?

I need to drag images into discrete locations inside a div and be able to save the positions as well as move the images around inside the canvas.

user1261710
  • 2,539
  • 5
  • 41
  • 72

1 Answers1

4

You can definitely do that. Its just a matter of declaring the the draggable and droppable elements. This jsfiddle will give you an idea.

 $(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [50, 50]
});

var gridster = $(".gridster ul").gridster().data('gridster');
$("#draggable").draggable();
$(".gridster ").droppable({
    drop: function (event, ui) {
        $("#draggable").removeAttr("style");
        gridster.add_widget(
       '<li class="new">
           <img src="http://www.sparity.com/images/facebookIcon.jpg" alt="facebook"> 
        </li>', 1, 1);

    }
});
Nupur
  • 616
  • 6
  • 15
  • 1
    thx, but this will always add the widget at an fixed place, and not the widget where you dropped it. Gridster is not responding to the new widget, until `add_widget` is called. This is a bit strange behavior from as user viewpoint IMO. – Julian Sep 25 '14 at 15:51
  • That's a fair point. However, this is a start of the solution. It could be made sophisticated with additional information. – Nupur Sep 26 '14 at 08:58
  • Well I think it isn't possible in this library, yet. There is a feature request to a similar subject on Github https://github.com/ducksboard/gridster.js/issues/68. – Julian Sep 26 '14 at 10:49