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.

Caledonian

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/

Pantomimist

Answer 2

I also realize this question is old. However it still comes up at the top of the search. I think you were on the right track with removing the element in the drop method.

I Modified kayladnls fiddle to use your approach but instead of just removing it, use gridter's remove.

Here is the fiddle demonstrating drag-to-trashcan-to-delete functionality. http://jsfiddle.net/nrC4J/46/

Edit: to get it working with the current version of JQuery you need to use the current version of jquery-ui: here is a fiddle with jquery 2.1.0 and jquery-ui 1.11.4 http://jsfiddle.net/nrC4J/52/

$(function () {

    // initiate Gridster
    var gridster = $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100],
    }).data("gridster")

    // set lis to Jquery draggable elements
    $(".gridster li").draggable();

    // set up drop space
    $('#log').droppable({
        drop: function (e, ui) {
            gridster.remove_widget(ui.helper.css('display', 'none'))
        }
    });

});

Chalcocite

Hi this does not work with the current jquery, can you please let me know what to change – Organize

it is the jquery-ui version I used in the fiddle, jquery removed the .browser stuff in 1.9+ so you will need to update the jquery-ui version to edge as well. I've updated the answer with jquery 2.1.0 version. – Chalcocite