Photoshop像带有jQuery的Grid / Guidelines，HTML 5

Question

我正在寻找带有jQuery的网格和准则之类的Photoshop。有任何插件吗？还是有没有办法在HTML 5页面上创建此类可拖动/可移动的指南。

更新/答案

这里是工作提琴 [感谢Xenethyl ]

Answer 1

据我所知，尚无任何可用于此类内容的插件。但是，创建所述功能应该非常简单。

jQuery UI具有draggable可以分配的属性，因此，我将通过创建尺寸等于100% width, 1px height或的div来解决此问题1px width, 100% height。您可以将标尺（或其他托盘，用于将导板拉出）在工作区域的边缘，并且当用户单击热点区域时，他们最终将抓住隐藏的指南。如果他们将参考线拖回托盘区域，则该参考线将被隐藏和/或破坏。

由于您一次只能创建一个辅助线（遵循Photoshop方法），因此建议您预先创建一个垂直和水平辅助线，并将它们隐藏在标尺或您用于辅助线创建的任何热点下。这样，您可以相对轻松地将mousedown事件传播到隐藏的指南，而不必担心将事件转移到尚未创建的DOM元素（即，我将避免根据需要创建指南；始终有一个准备好出发）。

我可能会使用来处理准则的隐藏z-indexing，但如果给定应用程序更容易实现，则还可以使用不透明度和背景色选项。