像网格/指南的Photoshop，JQuery，Html 5

Question

我正在寻找像grid＆amp; amp; JQuery指南。这有插件吗？或者有没有办法在Html 5页面上创建这样的可拖动/可移动指南。

更新/答案

此处有效Fiddle [感谢Xenethyl]

Answer 1

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

jQuery UI具有您可以指定的draggable属性，因此我只需创建维度等于100% width, 1px height或1px width, 100% height的div即可。您可以在工作区域的边缘放置标尺（或其他托盘以拉出导板），当用户点击热点区域时，他们最终会抓住隐藏的指南。如果他们将指南拖回托盘区域，则会隐藏和/或销毁指南。

由于您一次只能创建一个指南（遵循Photoshop方法），我建议您预先创建一个垂直和水平指南，并将它们隐藏在您的标尺或您用于指南的任何热点下面创建。这样你可以相对容易地将mousedown事件传播到隐藏的指南，你不必担心将事件转移到尚未创建的DOM元素（即我会避免根据需要创建指南;总是有一个准备好了。）

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