Эх... я уже попадал на данный пример из
Реализация Drag and Drop
На основе него уже действительно хорошо разобрался и реализовал хороший drag & drop.
У меня возникла сложность в другом моменте (при рисовании линий из рис. в теме).
Когда я навожу на окружность, я пытаюсь взять абсолютные координаты окружности (чтобы линию привязать к центру окружности независимо, где человек щелкнет и потянет линию. но сама окружность находиться в группе (прямоугольник визуально), и если доставить координаты окружности, то получаю их относительно группы, что не подходит) (линии рисуются в другой группе, чтобы визуально отделить от блоков). На данный момент линии тянуться и располагаются где надо используя координаты курсора мыши и это выглядит немного некрасиво (тоесть человеку, для красоты, нужно щелкать идеально по центру окружности, а я бы хотел бы немного помочь удобней сделать, для этого нужно как-то получить эти координаты).
Вижу решение одно, но оно мне не нравиться: это рекурсивно перебирать группы и смотреть их позиционирование распарсивая transform="translate" и суммируя в координату, но скорее это ресурсоемкая будет задачей, когда элементов будет больше
<!-- СЕТКА -->
<g class="grid"><rect width="100%" height="100%" fill="url(#grid)" /></g>
<!-- СЕТКА -->
<!-- СПИСОК КАНАЛОВ -->
<g class="chanel-lines"></g>
<!-- СПИСОК КАНАЛОВ -->
<!-- УСТРОЙТСВА -->
<g class="svg-schema"></g>
<!-- УСТРОЙТСВА -->
Внутри устройств лежат уже сами блоки обернуты в <g> с transform="translate(x y)"...
В общем как-то так