blocks|key|74683|text|有一个用于旋转的有用的jquery插件。你的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74684|<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>|code-block|syntax|javascript|74685|这应该能行。|74686|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

There is a useful jquery plugin for rotation..
Your code:

<pre><code>&lt;div id="product"&gt;

&lt;img src="images/01.jpg" /&gt;

&lt;img src="images/02.jpg" /&gt;

&lt;img src="images/03.jpg" /&gt;

&lt;img src="images/04.jpg" /&gt;

&lt;img src="images/05.jpg" /&gt;

&lt;/div&gt;
&lt;script type="text/javascript"&gt;

jQuery(document).ready(function() {

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

});

&lt;/script&gt;
</code></pre>

This should work.

blocks|key|2119346|text|大多数目标都可以通过css+2/3+%2B一些纯js来实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2119347|剪裁/掩蔽|blockquote|2119348|http://www.html5rocks.com/en/tutorials/masking/adobe/|offset|length|2119349|调整大小，更改文本框的字体样式/颜色/大小，添加背景|2119350|纯js/css2+2|2119351|旋转|2119352|css3变换性质transform.asp|2119353|拖拽|2119354|可以很容易地使用纯js，或者您可以尝试一些开源插件，或者像jquery这样的可拖式插件。|2119355|至于您当前的列表，我看不出来，为什么您需要这样的框架，因为大多数框架可以通过简单的js/css来实现，只需一点努力/googling就可以实现。|2119356|在我简陋的opininon中，jquery或类似的东西才是您真正需要的。只需查看jquery在这里的“交互”部分，https://jqueryui.com/draggable/，看看它是否可以帮助您构建构建器界面。每个交互都有不同的例子(右边栏)。|2119357|UPD:下面是一些http://jsfiddle.net/tbpxnxrm/2/的脏代码示例(使用jquery+)。在#main中双击创建其他元素。没有实现从http://jsfiddle.net/4Vfm5/1095/分叉的碰撞/重叠检查|style|CODE|2119358|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);|code-block|syntax|javascript|2119359|UPD2:几年后，我的例子完全停止了。虽然不能确定原因，但主要的答案仍然是可信的。|2119360|entityMap|0|LINK|mutability|MUTABLE|url|1|http://www.w3schools.com/cssref/css3_pr_transform.asp|2|https://jqueryui.com/draggable/|3|http://jsfiddle.net/tbpxnxrm/2/|4|http://jsfiddle.net/4Vfm5/1095/^0|0|0|0|1H|0|0|0|0|0|8|D|1|0|0|0|0|1L|V|2|0|1N|5|9|V|3|27|V|4|0|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1P|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|1Q|8|@]|9|@$G|1R|H|1S|1|1T]]|A|$]]|$1|I|3|J|5|D|7|1U|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1V|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1W|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1X|8|@]|9|@$G|1Y|H|1Z|1|20]]|A|$]]|$1|Q|3|R|5|D|7|21|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|22|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|23|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|24|8|@]|9|@$G|25|H|26|1|27]]|A|$]]|$1|Y|3|Z|5|6|7|28|8|@$G|29|H|2A|10|11]]|9|@$G|2B|H|2C|1|2D]|$G|2E|H|2F|1|2G]]|A|$]]|$1|12|3|13|5|14|7|2H|8|@]|9|@]|A|$15|16]]|$1|17|3|18|5|6|7|2I|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|F]]|1G|$5|1C|1D|1E|A|$1F|1H]]|1I|$5|1C|1D|1E|A|$1F|1J]]|1K|$5|1C|1D|1E|A|$1F|1L]]|1M|$5|1C|1D|1E|A|$1F|1N]]]]

Most of your goals can be achieved by css 2/3 + some pure js

<blockquote>
 clipping/masking
</blockquote>

<a href="http://www.html5rocks.com/en/tutorials/masking/adobe/" rel="nofollow noreferrer">http://www.html5rocks.com/en/tutorials/masking/adobe/</a>

<blockquote>
 re-sizing, change font style/color/size for textboxes, add backgrounds
</blockquote>

pure js/css2

<blockquote>
 rotation
</blockquote>

css3 transform property <a href="http://www.w3schools.com/cssref/css3_pr_transform.asp" rel="nofollow noreferrer">http://www.w3schools.com/cssref/css3_pr_transform.asp</a>

<blockquote>
 dragging
</blockquote>

Can be pretty easily done, using pure js or you can try some open-source plugins, or something like jquery draggable.

As for your current list, I don't actually see, why do you want some framework for this, when most of it can be achieved by pure js/css with a little effort/googling.

In my humble opininon, jquery or something similar is all you really need. Just check jquery's "interactions" section here <a href="https://jqueryui.com/draggable/" rel="nofollow noreferrer">https://jqueryui.com/draggable/</a> to see if it can help you with building your builder interface. There are various examples for each interaction (right sidebar).

UPD: 
Here is some dirty code example for you (using jquery UI) <a href="http://jsfiddle.net/tbpxnxrm/2/" rel="nofollow noreferrer">http://jsfiddle.net/tbpxnxrm/2/</a>. Doubleclick in <code>#main</code> to create additional elements. No collision/overlapping checks implemented, forked from <a href="http://jsfiddle.net/4Vfm5/1095/" rel="nofollow noreferrer">http://jsfiddle.net/4Vfm5/1095/</a>

<pre><code>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);
</code></pre>

UPD2: After a couple of years my example stopped working at all on jsfiddle. Can't surely tell why, yet the main answer is still credible.

blocks|key|75115|text|据我理解，您希望创建可以配置的仪表板。我建议使用一个表结构表合并与拆分，其中每个单元格应该有一个可下拉的组件，如|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|75116|<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>|code-block|syntax|javascript|75117|喜欢|75118|然后放下写你自己的逻辑|75119|$(+".set-as-droppable"+).droppable({
++++++++accept:+"div.Dragable",
++++++++drop:+function(+event,+ui+)+{

}
});+|75120|可拖放组件可以是文本或图像，在拖放时，您可以进行任何操作。|75121|entityMap|0|LINK|mutability|MUTABLE|url|http://www.redips.net/javascript/table-td-merge-split/^0|T|6|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

As of my understanding you want to create dashboard which can be configurable.
I would suggest use a table structure <a href="http://www.redips.net/javascript/table-td-merge-split/" rel="nofollow">Table merge and split</a> in which each cell should have a dropable component like

<pre><code>&lt;table id="mainTable"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;td class="set-as-droppable"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
</code></pre>

Like

Then on drop write your own logic

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

}
}); 
</code></pre>

And dragable component can be TEXT or IMAGE and on drop you can give any operation

blocks|key|74779|text|我认为，如果您的目标是使它尽可能简单，那么您就不能只使用一个框架来完成这个任务。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74780|如果我理解得很好的话，你想做的就是让你的应用程序的用户直接在浏览器中做一些高级的“绘图”。|74781|首先:如果没有画布元素，它们的作品将不得不导出/生成服务器端。|74782|现在，最好的方法是拥有一个javascript对象，它代表每个文档及其内容，其中包括模型，以及描述的位置、旋转等每个属性。并且应该呈现这个对象，使css属性和html元素与对象结构相对应。也就是说，AngularJS将是我的首选，因为一旦您的对象被修改，它几乎会自动地监视您的模型并实时地呈现目标元素。(角2更好，但只记录在TypeScript和Dart中)|offset|length|style|BOLD|74783|从这里开始，使用html5+&+css3，可以使用一个很好的属性来操作元素：transform。它采用“translateX(10+or+)”或“rotateZ(10+10px)”这样的值。要了解更多有关它的信息，请访问transform.asp。|74784|另外，对于拖放物：draganddrop.asp。|74785|若要裁剪图像，应使用服务器端代码。(使用php：http://php.net/manual/fr/function.imagecrop.php的示例)|74786|要在图像上播放掩码，还可以使用css3属性：clip.asp|74787|对于应用程序和服务器之间的通信，请使用jQuery函数：http://api.jquery.com/category/ajax/。|74788|最后，从css3中选择您想要的内容：intro.asp。images.asp|74789|希望能帮到你。祝你好运！|74790|UPDATE：我发现clip+css属性已经过时了，现在它是剪辑路径，但它的工作方式大致相同。|74791|更新2：实际上，掩码(包含图像而不是路径)可以通过掩码css属性：https://developer.mozilla.org/en-US/docs/Web/CSS/mask来制作。但是要小心，它仍然部分支持http://caniuse.com/#search=mask。|74792|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/css3_pr_transform.asp|1|http://www.w3schools.com/html/html5_draganddrop.asp|2|http://php.net/manual/fr/function.imagecrop.php|3|http://www.w3schools.com/cssref/pr_pos_clip.asp|4|http://api.jquery.com/category/ajax/|5|http://www.w3schools.com/css/css3_intro.asp|6|http://www.w3schools.com/css/css3_images.asp|7|https://developer.mozilla.org/en-US/docs/Web/CSS/mask|8|http://caniuse.com/#search=mask^0|0|0|0|2R|9|0|12|9|32|D|0|0|9|F|1|0|O|1B|2|0|M|8|3|0|S|10|4|0|I|9|5|S|A|6|0|0|0|6|0|0|3|X|1H|7|2V|V|8|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1U|8|@$H|1V|I|1W|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1X|8|@$H|1Y|I|1Z|J|K]]|9|@$H|20|I|21|1|22]]|A|$]]|$1|N|3|O|5|6|7|23|8|@]|9|@$H|24|I|25|1|26]]|A|$]]|$1|P|3|Q|5|6|7|27|8|@]|9|@$H|28|I|29|1|2A]]|A|$]]|$1|R|3|S|5|6|7|2B|8|@]|9|@$H|2C|I|2D|1|2E]]|A|$]]|$1|T|3|U|5|6|7|2F|8|@]|9|@$H|2G|I|2H|1|2I]]|A|$]]|$1|V|3|W|5|6|7|2J|8|@]|9|@$H|2K|I|2L|1|2M]|$H|2N|I|2O|1|2P]]|A|$]]|$1|X|3|Y|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2R|8|@$H|2S|I|2T|J|K]]|9|@]|A|$]]|$1|11|3|12|5|6|7|2U|8|@$H|2V|I|2W|J|K]]|9|@$H|2X|I|2Y|1|2Z]|$H|30|I|31|1|32]]|A|$]]|$1|13|3|-4|5|6|7|33|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]|1B|$5|16|17|18|A|$19|1C]]|1D|$5|16|17|18|A|$19|1E]]|1F|$5|16|17|18|A|$19|1G]]|1H|$5|16|17|18|A|$19|1I]]|1J|$5|16|17|18|A|$19|1K]]|1L|$5|16|17|18|A|$19|1M]]|1N|$5|16|17|18|A|$19|1O]]|1P|$5|16|17|18|A|$19|1Q]]]]

I think you can't do this with only one framework if your goal is to make it as easy as possible.

If I understand well, what you want to do is to allow your app' user to make some kind of advanced "drawing" made directly in the browser.

First : Without canvas element, their works will have to be exported/generated server-side.

Now, the best way to do this would be to have a javascript object that represents each document and their content, with models included and each properties like position, rotation described. And this object should be rendered making css properties and html elements correspond to the object structure. That is to say AngularJS would be my first choice as it watches almost automatically your models and render the target element in real time as soon as your object is modified. (Angular 2 is better but only documented in TypeScript and Dart)

From here, with html5 &amp; css3, elements can be manipulated with a nice property : transform. It takes values like "translateX(10px)" or "rotateZ(10deg)".
To learn more about it : <a href="http://www.w3schools.com/cssref/css3_pr_transform.asp" rel="nofollow">http://www.w3schools.com/cssref/css3_pr_transform.asp</a>.

Also, for the drag and drop things : <a href="http://www.w3schools.com/html/html5_draganddrop.asp" rel="nofollow">http://www.w3schools.com/html/html5_draganddrop.asp</a>.

To crop an image, you should use server-side code. (example with php : <a href="http://php.net/manual/fr/function.imagecrop.php" rel="nofollow">http://php.net/manual/fr/function.imagecrop.php</a>)

To play with masks on images, there are also css3 properties that work well :
<a href="http://www.w3schools.com/cssref/pr_pos_clip.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_pos_clip.asp</a>

And for communication between your app and the server, use jQuery functions :
<a href="http://api.jquery.com/category/ajax/" rel="nofollow">http://api.jquery.com/category/ajax/</a>.

Finally, pick what you want from css3 : <a href="http://www.w3schools.com/css/css3_intro.asp" rel="nofollow">http://www.w3schools.com/css/css3_intro.asp</a>.
<a href="http://www.w3schools.com/css/css3_images.asp" rel="nofollow">http://www.w3schools.com/css/css3_images.asp</a>

I hope it'll help you. Good luck !

UPDATE : I found that clip css property is obsolete, now it's clip-path but it works approximatively the same way.

UPDATE 2 : Actually, masks (with images and not paths) can be made through mask css property : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/mask</a>. But be careful, it's still partially supported <a href="http://caniuse.com/#search=mask" rel="nofollow">http://caniuse.com/#search=mask</a>.

blocks|key|93204|text|我试着在空闲时间实现这一点，但这并不能在几个小时后使用纯js从头做起。到目前为止，我有一个jQuery插件原型，用于将新的dom元素放入页面区域。我还在尝试使页面中的任何块组件都可以调整大小。在我投入的几个小时里，我取得了一些成功。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|93205|可调整大小的块组件：(编辑:拖动两边中间的4个小手柄)|93206|小提琴|offset|length|93207|带有菜单和可下垂区域的页面生成器原型(只有文本项可以删除)：|93208|93209|我会不断更新，无论何时我工作它，但我不会有一个完成的插件在短期内。|93210|Too+much+code+to+put+here!+Visit+the+fiddle|code-block|syntax|javascript|93211|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/malinkody/5n1ubLoa/|1|https://jsfiddle.net/malinkody/tk073q84/^0|0|0|0|3|0|0|0|0|3|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$F|14|G|15|1|16]]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|E|5|6|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1D|8|@]|9|@]|A|$P|Q]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]]]

I tried to implement this in my free time but its not something that can be done from the ground up using pure js in a couple of after hours. So far I have a jQuery plugin prototype for dropping new dom elements into a page area. I've also been experimenting with making any block component in a page resizable. In the few hours I put into it I had some success.

Resizable block component: (Edit: drag the 4 small handles in the middle of the sides)

<a href="https://jsfiddle.net/malinkody/5n1ubLoa/" rel="nofollow">Fiddle</a>

Page builder prototype with menu and droppable area (Only the text item can be dropped):

<a href="https://jsfiddle.net/malinkody/tk073q84/" rel="nofollow">Fiddle</a>

I'll keep updating the fiddles whenever I get to work on it, but I won't have a finished plugin anytime soon. 

<pre><code>Too much code to put here! Visit the fiddle
</code></pre>

I'm in the process of building an A4 size drag and drop page builder. 
The elements this builder can contain are images and text boxes.

I am after for some advice on what frameworks are available that can be used to build this type of front-end functionality.

Example of what I'm after, see here <code>canva.com</code>

The two frameworks I tried are so far are <code>fabric js</code> and <code>greensock draggable</code>, which didn’t meet my needs or are pretty difficult to create a complete page builder. 

ideally i don't want to use canvas for this.

edit: 
Basic Feature:

<ul>
<li>cropping</li>
<li>rotation </li>
<li>re-sizing</li>
<li>change font style/color/size for textboxes</li>
<li>add backgrounds</li>
<li>frames/ masking images (square image can become star shape with a overlay)</li>
</ul>

javascript drag and drop page builder

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在构建一个A4大小的拖放页面生成器。此生成器可以包含的元素是图像和文本框。我想得到一些关于可以用来构建这种前端功能的框架的建议。我想要的例子，参见这里的canva.com到目前为止，我尝试过的两个框架是fabric js和greensock draggable，它们不能满足我的需要，或者很难创建一个完整的页面生成器...

问javascript拖放页面生成器
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript拖放页面生成器EN