javascript拖放页面构建器

Question

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

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

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

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

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

编辑： 基本功能：

• 裁剪
• 旋转
• 调整大小
• 更改文本框的字体样式/颜色/大小
• 添加背景
• 框架/遮罩图像（方形图像可以变成带有叠加层的星形）

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>

喜欢

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

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

}
}); 

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

Answer 2

你的大部分目标都可以通过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 或类似的东西就是你真正需要的。只需在https://jqueryui.com/draggable/ 处查看 jquery 的“交互”部分，看看它是否可以帮助您构建构建器界面。每个交互都有各种示例（右侧栏）。

更新： 这是一些脏代码示例（使用 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 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

如果你的目标是尽可能简单，我认为你不能只使用一个框架来做到这一点。

如果我理解得很好，您想要做的是让您的应用用户直接在浏览器中进行某种高级“绘图”。

首先：没有画布元素，他们的作品将不得不在服务器端导出/生成。

现在，最好的方法是创建一个表示每个文档及其内容的 javascript 对象，其中包含模型以及描述的位置、旋转等每个属性。并且这个对象应该被渲染使css属性和html元素对应于对象结构。也就是说 AngularJS 将是我的首选，因为它几乎会自动监视您的模型，并在您修改对象后立即实时渲染目标元素。 （Angular 2 更好，但只记录在 TypeScript 和 Dart 中）

从这里开始，使用 html5 和 css3，可以使用一个不错的属性来操作元素：transform。它采用“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

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

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

更新 2：实际上，可以通过 mask css 属性：https://developer.mozilla.org/en-US/docs/Web/CSS/mask 制作遮罩（带有图像而不是路径）。但请注意，它仍然部分支持http://caniuse.com/#search=mask。