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來處理指南的隱藏，但是如果在應用程序中更容易實現，您還可以使用不透明度和背景顏色選項。