Geek Answers Handbook

Gridster remove widget by dragging to div

I am using gridster.js and trying to find a good way to set it up, where I can drag one of the widgets into a "trash", such as a div, and remove this widget from the grid. If anyone has thoughts on this, that would be great. Here is what I found, but tried to find a better way to make it work with the grid.

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

Any thoughts? Thanks in advance.

+6
source share
2 answers

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

I defined a stop function, when the grid initialization is such that 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');

The (though very rudimentary) fiddle works here: http://jsfiddle.net/nrC4J/

+2
source

I also understand that this question is old. However, it is still at the top of the search. I think you were on the right track with deleting an element in the drop method.

I modified the kayladnls script to use your approach, but instead of just removing it, use gridter remove.

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

Edit: to make it work with the current version of jQuery, you need to use the current version of jquery-ui: here is the 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')) } }); });
0
source

More articles:


All Articles