jquery - jQuery插件，用于绘制简单形状的场景，支持拖放

Question

我正在寻找一些可以帮助我实现以下目标的 jQuery 插件：

1. 向用户展示一些固定大小的画布，用于安排“场景”
2. 允许将基本形状、自定义对象放到场景中
3. 支持场景中元素的拖放
4. 支持“截图到网格”

有任何想法吗？

Answer 1

您应该尝试jqueryui，它提供了许多具有强大功能的 ui 元素，如拖放等，并免费提供浏览器兼容性。

要获得类似网格捕捉的功能，请使用以下设置：

$(function() {
    $( "#draggable" ).draggable({
        containment: "parent",
        grid: [10, 20],
        drag: function() {
            // custom code
        }
    });

});

还有更多不错的设置，例如捕捉到其他元素等。请参阅此处的完整文档

Answer 2

jquery UI 不是我要找的库，因为它只提供对 Drag'n'Drop 的支持，仅此而已。我发现的一个特别有趣的库是http://raphaeljs.com/。您可以轻松地构建一个用户可以在其上绘制自定义形状的画布，它具有许多可以减少样板代码的内置工具，并且还支持 D'n 'D。我认为 Snap to Grid 可以手动执行，但我发现这个库非常好用且功能强大。

我会等待其他答复，也许有人知道更好的事情。

编辑 raphaeljs 似乎无法处理开箱即用的拖放图像（需要一些自定义代码）。我再次使用 jQuery UI，并认为它要好得多。