Gridster通過拖動到DIV

我使用gridster.js刪除插件，我試圖想出一個好辦法將其設置在那裏我可以拖動窗口小部件之一成「垃圾桶」之類的div並將其刪除來自網格的小部件。如果任何人有任何想法，這將是偉大的。這是我發現的，但試圖找出使它與柵格工作的最佳方式。Gridster通過拖動到DIV

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

有什麼想法？提前致謝。

來源

2013-03-10 klye_g

我意識到這個問題是有點老了，我不知道，如果你還在尋找一個解決方案，但我可以通過創建gridster網格內一個div和不同造型它來實現這一點。

我初始化gridster這樣是座標是這個div裏面，去掉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');

這裏的工作（雖然非常簡陋）小提琴：http://jsfiddle.net/nrC4J/

來源

2013-11-28 05:03:21 greydnls

我也意識到這個問題是舊的。但它仍然出現在搜索的頂部。我認爲你在正確的軌道上移除drop方法中的元素。

我修改kayladnls小提琴用你的方法，但不是僅僅取消它，使用gridter的刪除。

這裏是小提琴證明拖動到垃圾桶到刪除功能。 http://jsfiddle.net/nrC4J/46/

編輯：得到它使用jQuery當前版本的工作，你需要使用jQuery的用戶界面的當前版本：這裏是使用jQuery 2.1.0和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')) 
     } 
    }); 

});

來源

2015-02-27 21:23:41 BenJamin

你好，這不符合目前的jQuery的工作，可以請你讓我知道什麼改變 – 2015-04-05 15:36:25

它是我的小提琴使用jQuery的UI版本，jQuery的在1.9+刪除.browser東西，所以你會還需要更新jquery-ui版本。我已經用jQuery 2.1.0版更新了答案。 – BenJamin 2015-04-06 16:26:09

Gridster通過拖動到DIV

回答

相關問題