Gridster usunąć widget przeciągając do div

Question

Używam gridster.js i staram się wymyślić dobry sposób, aby go skonfigurować, gdzie mogę przeciągnąć jeden z widgetów do "kosza", jak div i go usunąć widget z siatki. Jeśli ktoś ma jakieś przemyślenia na ten temat, byłoby wspaniale. Oto, co znalazłem, ale starałem się wymyślić najlepszy sposób, aby zadziałało to z gridster.

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

Jakieś myśli? Z góry dziękuję.

Answer 1

Zdaję sobie sprawę, że to pytanie jest trochę stare i nie jestem pewien, czy wciąż szukasz rozwiązania, ale udało mi się to osiągnąć, tworząc element div w siatce siatki i stylizując go w inny sposób.

Zdefiniowałem funkcję zatrzymania podczas inicjowania gridstera tak, że współrzędne są wewnątrz tego elementu div, usuń 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'); 

Oto roboczego (choć bardzo prymitywny) skrzypce: http://jsfiddle.net/nrC4J/

Answer 2

ja też sobie sprawę, to pytanie jest stary. Jednak wciąż pojawia się na górze wyszukiwania. Myślę, że jesteś na dobrej drodze, usuwając element w metodzie upuszczania.

I Zmodyfikowane skrzypce kayladnls wykorzystują twoje podejście, ale zamiast po prostu je usunąć, użyj narzędzia do usuwania siatki.

Oto skrzypce pokazujące funkcję przeciągania do kosza na śmieci. http://jsfiddle.net/nrC4J/46/

Edit: aby dostać pracy z aktualnej wersji JQuery trzeba użyć aktualnej wersji jQuery UI: o to skrzypce z jQuery 2.1.0 i 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')) 
     } 
    }); 

});