How to drop a draggable into gridster

Question

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.

Answer 1

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);

    }
});