Photoshop, как Grid / Guidelines с помощью JQuery, HTML 5 - PullRequest
2 голосов
/ 23 сентября 2011

Я ищу Photoshop как сетку и руководство с JQuery.Есть ли плагин для этого?Или есть ли способ создать такие перетаскиваемые / подвижные направляющие на странице HTML 5.

enter image description here

ОБНОВЛЕНИЕ / ОТВЕТ

Здесь работает Скрипка [Благодаря Ксенетил ]

1 Ответ

4 голосов
/ 24 сентября 2011

Насколько я знаю, нет никаких плагинов для чего-то подобного. Однако создание указанной функциональности должно быть довольно простым.

Пользовательский интерфейс jQuery имеет свойство draggable, которое вы можете назначить, поэтому я бы подошел к этому, просто создавая элементы div, размеры которых равны либо 100% width, 1px height, либо 1px width, 100% height. Вы можете расположить свою линейку (или другой лоток, из которого вытащите направляющие) по краям рабочей области, и когда пользователь нажимает в области горячей точки, он в конечном итоге хватает скрытую направляющую. Если они перетаскивают направляющую обратно в область лотка, направляющая скрывается и / или уничтожается.

Поскольку вы можете создавать только одну направляющую за раз (следуя подходу Photoshop), я бы предложил предварительно создать как вертикальную, так и горизонтальную направляющую и скрыть их под своей линейкой или любой горячей точкой, которую вы используете для направляющей создание. Таким образом, вы можете относительно легко распространить событие mousedown на скрытое руководство, и вам не нужно беспокоиться о переносе события в элемент DOM, который еще не был создан (т. Е. Я бы не стал создавать руководства по мере необходимости; всегда имейте готов к работе).

Я бы, вероятно, справился бы с сокрытием указаний, используя z-indexing, но вы также можете поэкспериментировать с параметрами непрозрачности и цвета фона, если любой из них будет проще реализовать в вашем приложении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...