如何将可拖动对象放入 gridster

Posted

技术标签:

【中文标题】如何将可拖动对象放入 gridster【英文标题】:How to drop a draggable into gridster 【发布时间】:2012-12-10 02:44:07 【问题描述】:

有谁知道是否可以将可拖动元素拖放到 gridster 中? http://gridster.net/#documentation

这对我的目的来说似乎很棒,但是你可以通过删除它来将它们添加到网格中吗?

我想将图像拖到 gridster 中。有可能吗? 我可以看看这个样本吗?

如果这是不可能的,你知道任何替代方案吗?

我需要将图像拖到 div 内的离散位置,并且能够保存位置以及在画布内移动图像。

【问题讨论】:

【参考方案1】:

你绝对可以做到。它只是声明可拖动和可放置元素的问题。这个jsfiddle 会给你一个想法。

 $(".gridster ul").gridster(
    widget_margins: [5, 5],
    widget_base_dimensions: [50, 50]
);

var gridster = $(".gridster ul").gridster().data('gridster');
$("#draggable").draggable();
$(".gridster ").droppable(
    drop: function (event, ui) 
        $("#draggable").removeAttr("style");
        gridster.add_widget(
       '<li class="new">
           <img src="http://www.sparity.com/images/facebookIcon.jpg" > 
        </li>', 1, 1);

    
);

【讨论】:

谢谢,但这将始终将小部件添加到固定位置,而不是您放置它的小部件。在调用add_widget 之前,Gridster 不会响应新的小部件。从 IMO 用户的角度来看,这有点奇怪。 这是一个公平的观点。然而,这是解决方案的开始。它可以通过附加信息变得复杂。 好吧,我认为这在这个库中是不可能的。在 Github github.com/ducksboard/gridster.js/issues/68 上有一个类似主题的功能请求。

以上是关于如何将可拖动对象放入 gridster的主要内容,如果未能解决你的问题,请参考以下文章

如何将可拖动的元素放入可排序的元素中,放置的项目不是原始元素而是自定义助手

如何将可拖动对象放置在目标对象的中心

在被拖动后如何将可拖动对象保持在其位置?

如何使用 angularJS 将可拖动指令应用于引导模式?

可在 angular-gridster 中的小部件之间拖动

将可序列化对象放入捆绑包时是不是总是被序列化?