javascript拖放页面构建器

Posted 2023-05-08

【中文标题】javascript拖放页面构建器

【英文标题】：javascript drag and drop page builder

【发布时间】：2016-05-04 22:46:01

【问题描述】：

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

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

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

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

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

编辑： 基本功能：

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

【问题讨论】：

您可以使用 html5 拖放 api 编写自己的模块。通常，像这样的解决方案是定制的，以满足最终用户设定的规范。如果你想在 *** 上找到一个可能的解决方案，你可以开始赏金。

@malinkody 感谢您的评论，是的，我回去查看 jquery ui，我可能只使用 jquery 编写代码并将每个页面元素存储在 json 对象数组中。仍处于早期阶段。

我有很大的兴趣，因为我的公司开始重新设计他们的 PDF 模板界面之一。如果你能更准确地定义你的需求，我可以在下周末开始一个基本的实现。例如，您只需要图像和文本框吗？他们是否应该进行旋转、调整大小、缩放等？边界框应该是什么样的？ （比如在fabric js中？）你想如何导出信息？导出的模板是否需要符合标准？它应该支持图层吗？ （例如在图像处理器中，例如 PS）

感谢您提供的信息，我将尝试使用 HTML 5 拖放来实现这一点。我会在一两天内给你答复。

我猜答案和 cmets 表明，没有通常已知的框架可以做到这一点。在开始编码之前，您需要解决一些困难 - 也许您可以单独要求这些框架：打印 (A4) 屏幕分辨率 -> DPI 很重要； DOM 节点的数量决定了你的表现 -> DOM 节点只有你看到的；多页 VS 屏幕滚动——嗯，这只是一次短暂的头脑风暴——也许将其作为起点扩展是个好主意

【参考方案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，拖放后可以进行任何操作

【参考方案2】：

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

剪辑/遮罩

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

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

纯js/css2

旋转

css3 变换属性http://www.w3schools.com/cs-s-ref/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 上完全停止工作。无法确定原因，但主要答案仍然可信。

【参考方案3】：

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

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

Fiddle

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

Fiddle

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

Too much code to put here! Visit the fiddle

【参考方案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>

这应该可行。

【参考方案5】：

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

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

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

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

从这里开始，使用 html5 和 css3，可以使用一个不错的属性来操作元素：transform。它采用“translateX(10px)”或“rotateZ(10deg)”之类的值。 要了解更多信息：http://www.w3schools.com/cs-s-ref/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/cs-s-ref/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。

【讨论】：

Alice，您知道屏幕pdf 转换框架或至少相关的规则集吗？ - 我知道这些是可用于 flashpdf 的服务器端框架。但是，我仍在为如何在客户端进行管理而苦苦挣扎。 （即使我不是最初的请求者，我想她或他也会从该信息中获利）

嗯，我正在做你的研究工作，因为很容易找到 ***.com/questions/19786113/…，正如你在代码中看到的那样，他正在使用 jsPDF：parall.ax/products/jspdf