Gridster Widget durch Ziehen in div entfernen

Question

Ich benutze gridster.js und versuche herauszufinden, eine gute Möglichkeit, es einzurichten, wo ich eines der Widgets in einen "Mülleimer" wie div ziehen kann und es entfernen lassen Widget aus dem Raster. Wenn jemand darüber irgendwelche Gedanken hat, wäre das großartig. Hier ist, was ich gefunden habe, aber versuchte herauszufinden, der beste Weg, um es mit Gridster arbeiten zu lassen.

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

Irgendwelche Gedanken? Danke im Voraus.

Answer 1

Ich weiß, dass diese Frage ein wenig alt ist, und ich bin mir nicht sicher, ob Sie immer noch nach einer Lösung suchen, aber ich konnte dies erreichen, indem ich ein div im Gridsterraster einrichtete und anders gestaltete.

Ich habe eine Stoppfunktion beim Initialisieren von gitter so definiert, dass die Koordinaten in diesem div sind, entferne das 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'); 

Hier ist ein Arbeits (wenn auch sehr rudimentär) Geige: http://jsfiddle.net/nrC4J/

Answer 2

Ich weiß, auch diese Frage ist alt. Es steht jedoch immer noch oben auf der Suche. Ich denke, du warst auf dem richtigen Weg mit dem Entfernen des Elements in der Drop-Methode.

I Modifizierte kayladnls Geige, um Ihren Ansatz zu verwenden, aber anstatt es nur zu entfernen, verwenden Sie Gridter entfernen.

Hier ist die Geige demonstriert Drag-to-Mülleimer-zu-löschen-Funktionalität. http://jsfiddle.net/nrC4J/46/

Edit:, um es mit der aktuellen Version von JQuery zu bekommen arbeiten müssen Sie die aktuelle Version von jquery-ui verwenden: hier ist eine Geige mit jquery 2.1.0 und 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')) 
     } 
    }); 

});