Как сделать Draggable block с привязкой к одной точке?

Question

[hom9k]

Недавно Лебедев постил в жежешечке конкурс на создание редакторской версии бизнес-линча на html + css (сейчас она у них реализована на флэше).

Текст задания:

«Нужно сделать страничку на HTML+CSS, на которой можно будет создать текстовый пузырь с хвостиком. Пузырь должен масштабироваться и двигаться, хвостик должен перемещаться на любое расстояние.»




Я работаю над проектом, в котором есть схожая по функционалу задача.


В принципе, мне не обязательно, чтобы этот блок был именно draggable, вопрос в том, как по заданным координатам точки и блока нарисовать этот самый хвостик? В какую сторону смотреть?

Answer 1

[Vitaliy Petrychuk]

Как по мне — SVG
www.w3schools.com/svg/svg_path.asp
Получаем координаты блока и соединяем три точки

Comments

[hom9k]

Спасибо! Похоже это то, что мне нужно.

Answer 2

[Dmitry Shvalyov]

Очевидно через Canvas, вот есть пример таскающегося блока:
www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

но вместо блока сделать форму, либо добавить вторую форму (хвостик), которая будет отрисовываться при перетаскивании блока.

Comments

[Анатолий]

Вообще не очевидно, драг и дроп можно элементарно и без html5 сделать, человека именно хвост интересует