javascript拖放页面构建器

Question

我正在构建一个 A4 大小的拖放页面构建器。 此构建器可以包含的元素是图像和文本框。

我正在寻求有关可用于构建此类前端功能的可用框架的一些建议。

我所追求的示例，请参见此处 canva.com

目前我试过的两个框架是fabric js和greensock draggable，这两个框架不能满足我的需求，或者很难创建一个完整的页面构建器。

理想情况下我不想为此使用 Canvas 。

编辑: 基本特征:

• 裁剪
• 旋转
• 调整大小
• 更改文本框的字体样式/颜色/大小
• 添加背景
• frames/masking images(正方形图像可以通过叠加变成星形)

Answer 1

据我了解，您想创建可配置的仪表板。 我建议使用表结构 Table merge and split其中每个单元格都应该有一个可放置的组件，例如

<table id="mainTable">
                    <tbody>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                    </tbody>
                </table>

喜欢

然后写下你自己的逻辑

$( ".set-as-droppable" ).droppable({
        accept: "div.Dragable",
        drop: function( event, ui ) {

}
}); 

可拖动的组件可以是文本或图像，并且在拖放时你可以给出任何操作