Gridster xóa tiện ích bằng cách kéo vào div

Question

Tôi đang sử dụng gridster.js và đang cố tìm ra cách tốt để thiết lập nơi tôi có thể kéo một trong các tiện ích vào "thùng rác" như div và xóa nó tiện ích từ lưới. Nếu bất cứ ai có bất kỳ suy nghĩ về điều này sẽ là tuyệt vời. Đây là những gì tôi tìm thấy nhưng đã cố gắng tìm ra cách tốt nhất để làm cho nó hoạt động với gridster.

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

Mọi suy nghĩ? Cảm ơn trước.

Answer 1

Tôi nhận thấy câu hỏi này hơi cũ và tôi không chắc liệu bạn có đang tìm giải pháp hay không, nhưng tôi có thể đạt được điều này bằng cách tạo một div bên trong lưới lưới và tạo kiểu khác.

Tôi đã xác định chức năng dừng khi khởi tạo lưới như vậy là tọa độ nằm bên trong div này, hãy xóa tiện ích.

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'); 

Dưới đây là một hoạt động (mặc dù rất thô sơ) fiddle: http://jsfiddle.net/nrC4J/

Answer 2

Tôi cũng nhận ra câu hỏi này là cũ. Tuy nhiên nó vẫn xuất hiện ở đầu tìm kiếm. Tôi nghĩ bạn đã đi đúng hướng với việc xóa phần tử trong phương thức thả.

Tôi đã sửa đổi kayladnls fiddle để sử dụng phương pháp tiếp cận của bạn nhưng thay vì chỉ xóa nó, hãy sử dụng tính năng xóa của gridter.

Dưới đây là fiddle thể hiện chức năng kéo-vào-thùng rác để xóa. http://jsfiddle.net/nrC4J/46/

Edit: để làm cho nó làm việc với phiên bản hiện tại của JQuery bạn cần phải sử dụng phiên bản hiện tại của jquery-ui: đây là một fiddle với jquery 2.1.0 và 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')) 
     } 
    }); 

});