Gridster remove widget by dragging into div

Question

I am using gridster.js and am trying to figure out a good way to set it up where I can drag one of the widgets into a "trash can" like div and have it remove that widget from the grid. If anyone has any thoughts on this that would be great. Here is what I found but was trying to figure out the best way to make it work with gridster.

$(".widget").draggable();
    $('#trash-can').droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });

Any thoughts? Thanks in advance.

Answer 1

I realize this question is a little old, and I'm not sure if you're still looking for a solution, but I was able to achieve this by creating a div inside the gridster grid and styling it differently.

I defined a stop function when initializing gridster such that is the coordinates are inside this div, remove the widget.

var gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      draggable: {
         stop: function(e, ui, $widget) {
         console.log(ui);
            if (ui.position.left >435 ) gridster.remove_widget(ui.$helper[0]);
        }
      }
    }).data('gridster');

Here's a working (though very rudimentary) fiddle: http://jsfiddle.net/nrC4J/