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

回答

相关问题