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.

Woodie

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

    }
});

Unfinished

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. – Erzurum

That's a fair point. However, this is a start of the solution. It could be made sophisticated with additional information. – Unfinished

Well I think it isn't possible in this library, yet. There is a feature request to a similar subject on Github github.com/ducksboard/gridster.js/issues/68. – Erzurum