Линия прикрепленная к блоку, который можно перетягивать.
 

Вот есть такой рисунок,


Представте, что блок А зафиксирован, а блоки В и С можно перетаскивать но вслед за ними джолжны двигаться и линии, линия не может растягиваться или сокращаться, поэтому блоки могут перетаскивться ограниченно, вокруг оси, которую описывает линия, тоесть как стрелки на часах.
Как это реализовать на JS, у меня только одна идея canavas, но хотелось бы без него.

svg, flash, div+css3+rotate =-))

но думаю канвас самое лучшее,

блоки можно и так вывести, а нижним слоем положить канвас на котором только линии и отрисовывать.

Я думаю можно реализовать данную проблему с использованием jquery ui draggable. Соединяющие линии выполнить в виде дивов при перетаскивании блоков вращать линии с помощью css3 свойства rotate.

Либо использовать векторную библиотеку raphaeljs
http://raphaeljs.com/graffle.html

Joint js вам в помощь!

лол

смотрю пока в сторону
http://raphaeljs.com
и Joint js

Раньше так писали про флеш и это ещё понятно было. Но в канвасе, что не устраивает?

тогда уж лучше SVG - ровно для таких фич он и приспособлен.

канвас сюда не лезет из-за семантичности - да, на нём можно сделать такую штуку, но он приспособлен не для диаграмм и блоков, а для рисунков.

разницу трудно уловить, но она есть :)

хотя никто и не запрещает сделать это на канвасе.

тут еще надо уточнять что будет в блоках?
Если буквы A,B,C :) то я бы выбрал canvas
если динамический график зарплат сотрудников (или еще что-нибудь в этом роде) то svg
Если разметка html - сделал бы на дивах

Блин мне на флеше проще я канвас не разу не юзал.
В принципе уже почти доделал канвас оказался не таким страшным.
Выложу потом.

Что то ребята у меня нифига не выходит.
Наделал всякой фигни, а то что нужно не выходит.
http://learn.alpaca.org.ua/canavas.html
http://learn.alpaca.org.ua/druag.html

Наталкните на мысль.

ozzon91,
да вы не отрисовывайте все на канвасе, рисуйте только линии,

возьмите jquery ui dragable, там есть событие drag, вот на него повешайте обновление канваса

Прикольные куранты))) Только :
1) В функции draw - попробуй, переставь местами
line(); и rect(x - 15, y - 15, 30, 30); Чтобы линия была под блоком
2) у меня хром твой фон не видит (http://learn.alpaca.org.ua/druag.html) - все белое, лучше поменять на нормальный цвет
И 2 глюка еще надо убрать. (чтбы блок не выходил за канвас и иногда мышка рисует без нажатия - у меня тоже такое было)

Вопрос на самом деле в том, как сделать чтобы линии были жестко заданными.
Есть такой метод (подробностей не знаю, надо читать): http://www.w3.org/TR/2dcontext/#dom-...-ispointinpath
Возможно пригодится (если определить окружность, дальше которой линии не могут уходить и делать проверку).

Икак сделать чтобы блок тоже перетаскивался по определенной окружности и сохронял саое положение, а не крутился вокруг своей оси.

Я исчерапал все идеи, опыта наверное маловато

И как же сделать на jquery ui dragable что бы блок драгабился по определенной траектории

вот держите вариант

Благодарю, вы очень помогли

Dmitriyff, не могли бы вы расставить комментарии по js коду вашего примера.

ozzon91,
вуаля =-)))

даже чуть улучшил =-)))

супер, благодарю, буду ковырять.

ozzon91,
будут вопросы пишите =-)

Подгоняю под свои нужды, не выходит перенести все это гамузом в центр страницы т. к . центр вращения остается на прежнем месте,
вот http://learn.alpaca.org.ua/exemple.html как это решить?
и еще мне были нужны две независимые линии, пришлось продублирывать muve и dovn, думаю плохое решение.

Ди еще не могу сделать чтобы при перетаскивании центрального блока все перетаскивалось за ним.

А как у тебя сделано, так , что код не посмотреть?

В Хроме не показывает, в FF открылось.

Ничего не делал


Dmitriyff, оставте пожалуйсто свои контакты в ЛС, очень нужна помощь по данному вопросу.

var x = e.clientX - CENTER-400 сделай в каждом move
margin-left то есть

eirnvn, делал не помогло, мне уже подкинули решение, как разберусь в коде скажу ответ. Спасибо за помощь.

Странно, что не помогло - у меня работает, а решении тоже самое - offset.left == 400

Я про принцип, offset конечно намного лучше, чем цифра

ну в принцыпе я сделал с офсетом