Question

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

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

我之后的例子，请参阅此处canva.com

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

理想情况下，我不想使用画布。

编辑：基本特征：

裁剪
轮换
尺寸调整
更改文本框的字体样式/颜色/大小
添加背景
帧/遮蔽图像（方形图像可以变成带有叠加的星形）

Answer 1

你的大多数目标都可以通过css 2/3 +一些纯粹的js来实现

削波/掩蔽

http://www.html5rocks.com/en/tutorials/masking/adobe/

重新调整大小，更改文本框的字体样式/颜色/大小，添加背景

纯js / css2

旋转

css3转换属性http://www.w3schools.com/cssref/css3_pr_transform.asp

拖动

可以很容易地完成，使用纯js，或者你可以尝试一些开源插件，或类似jquery draggable。

至于你当前的列表，我实际上并没有看到，为什么你需要一些这样的框架，当大部分框架都可以通过纯粹的js / css实现，只需要一点努力/谷歌搜索。

在我的拙见中，你真正需要的是jquery或类似的东西。只需检查jquery的“交互”部分https://jqueryui.com/draggable/，看看它是否可以帮助您构建构建器界面。每个交互都有各种示例（右侧边栏）。

UPD：这里有一些脏代码示例（使用jquery UI）http://jsfiddle.net/tbpxnxrm/2/。双击#main以创建其他元素。没有实施冲突/重叠检查，从http://jsfiddle.net/4Vfm5/1095/

分叉

drag_defaults = {grid: [50,50], containment: "parent"};
resize_defaults = {
    aspectRatio: true,
    handles: 'ne, se, sw, nw',
    grid: [50,50],
    minHeight: 50,
    minWidth: 50
}

$('.draggable').draggable(drag_defaults);
$('.resizable').resizable(resize_defaults);

UPD2：几年后，我的例子在jsfiddle上完全停止了工作。不能肯定地说明原因，但主要答案仍然可信。

Answer 2

据我了解，您希望创建可配置的仪表板。我建议使用表结构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>

像

然后在drop上写下你自己的逻辑

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

}
});

可拖动组件可以是TEXT或IMAGE，然后可以进行任何操作

Answer 3

我试图在我的空闲时间实现这一点，但这不是可以在几个小时后使用纯js从头开始实现的。到目前为止，我有一个jQuery插件原型，用于将新的dom元素放入页面区域。我也一直在尝试使页面中的任何块组件可调整大小。在我投入的几个小时里，我取得了一些成功。

可调整大小的块组件:(编辑：拖动两侧中间的4个小手柄）

Fiddle

带有菜单和可放置区域的页面构建器原型（只能删除文本项）：

Fiddle

每当我开始工作时，我都会不断更新小提琴，但我很快就会赢得一个完成的插件。

Too much code to put here! Visit the fiddle

Answer 4

有一个有用的jquery插件可供循环使用.. 你的代码：

<div id="product">

<img src="images/01.jpg" />

<img src="images/02.jpg" />

<img src="images/03.jpg" />

<img src="images/04.jpg" />

<img src="images/05.jpg" />

</div>
<script type="text/javascript">

jQuery(document).ready(function() {

    jQuery('#product').j360();

});

</script>

这应该有用。

Answer 5

如果您的目标是尽可能简化，我认为您不能只使用一个框架。

如果我理解得很清楚，您要做的就是让您的应用用户直接在浏览器中制作某种高级“绘图”。

第一：没有canvas元素，他们的作品必须在服务器端导出/生成。

现在，执行此操作的最佳方法是使用javascript对象来表示每个文档及其内容，包括模型以及每个属性（如位置，旋转）。并且应该渲染此对象，使css属性和html元素对应于对象结构。也就是说 AngularJS 将是我的第一选择，因为它几乎会自动观察您的模型，并在您的对象被修改后立即实时渲染目标元素。（Angular 2更好，但仅在TypeScript和Dart中记录）

从这里开始，使用html5＆amp; css3，元素可以用一个很好的属性来操作：转换。它采用“translateX（10px）”或“rotateZ（10deg）”之类的值。要详细了解它：http://www.w3schools.com/cssref/css3_pr_transform.asp。

此外，对于拖放事物：http://www.w3schools.com/html/html5_draganddrop.asp。

要裁剪图像，您应该使用服务器端代码。（例如php：http://php.net/manual/fr/function.imagecrop.php）

要在图像上使用遮罩，还有css3属性可以正常工作： http://www.w3schools.com/cssref/pr_pos_clip.asp

对于您的应用和服务器之间的通信，请使用jQuery函数： http://api.jquery.com/category/ajax/

最后，从css3中选择你想要的东西：http://www.w3schools.com/css/css3_intro.asp。 http://www.w3schools.com/css/css3_images.asp

我希望它会对你有所帮助。祝你好运！

UPDATE ：我发现剪辑css属性已过时，现在它是剪辑路径，但它的工作方式大致相同。

UPDATE 2 ：实际上，可以通过掩码css属性https://developer.mozilla.org/en-US/docs/Web/CSS/mask制作掩码（带图像而不是路径）。但要小心，它仍然得到部分支持http://caniuse.com/#search=mask。

javascript拖放页面构建器

5 个答案: