Photoshop像网格/指南与JQuery，HTML 5

Question

我正在寻找像网格的Photoshop &使用JQuery指导。有没有插件？或者有什么方法可以在Html 5页面上创建这种可拖动/可移动的指南。

UPDATE/ANSWER

这里工作Fiddle [感谢Xenethyl]

Answer 1

据我所知，没有任何插件可用这样的事情。不过，创建所述功能应该非常简单。

jQuery UI有一个draggable属性，你可以指定，所以我会通过创建尺寸等于100% width, 1px height或1px width, 100% height的div来解决这个问题。你可以在你的工作区边缘用你的尺子（或其他一些托盘拉出导板），当用户点击热点区域时，它们最终会抓住一条隐藏的指引线。如果他们将指南拖回托盘区域，指南将被隐藏和/或销毁。

由于您一次只能创建一个指南（遵循Photoshop的方法），所以我建议您预先创建垂直和水平指南，并将它们隐藏在您的标尺或任何您用于指南创建。通过这种方式，您可以相对容易地将mousedown事件传播给隐藏指南，而且您不必担心将事件转移到尚未创建的DOM元素（即，我将避免根据需要创建指南;始终有一个准备好出发）。

我可能会使用z-indexing来处理指南的隐藏，但是如果在应用程序中更容易实现，您还可以使用不透明度和背景颜色选项。