Подтвердить что ты не робот

Перенос SVG для группы

Я пытаюсь добиться группового и индивидуального перетаскивания внутри группы. В группе есть 3 круга. Синие и серые круги должны перемещаться индивидуально (по onmousedown), а оранжевый - для группового перемещения (по onclick). Проблема заключается в том, что после перетаскивания всей группы, но вы должны попробовать http://www.atarado.com/stackOF/drag-with%20problems.svg и посмотреть код.

Любая помощь будет оценена. Спасибо.

Ответ 1

Я думаю, что исправил вашу проблему: http://dl.dropbox.com/u/169269/group_drag.svg

Проблема заключалась в том, что одиночное перетаскивание изменяло атрибуты окружности cx и cy, но групповое перетаскивание осуществляло преобразование всей группы. Я упростил все, поэтому все работает с использованием преобразований, и вам нужен только один набор функций для обоих:

function startMove(evt, moveType){
     x1 = evt.clientX;
     y1 = evt.clientY;
     document.documentElement.setAttribute("onmousemove","moveIt(evt)")

     if (moveType == 'single'){
        C = evt.target;
     }
     else {
        C = evt.target.parentNode;
     }
}

function moveIt(evt){
    translation = C.getAttributeNS(null, "transform").slice(10,-1).split(' ');
    sx = parseInt(translation[0]);
    sy = parseInt(translation[1]);

    C.setAttributeNS(null, "transform", "translate(" + (sx + evt.clientX - x1) + " " + (sy + evt.clientY - y1) + ")");
    x1 = evt.clientX;
    y1 = evt.clientY;
}

function endMove(){
    document.documentElement.setAttributeNS(null, "onmousemove",null)
}

Теперь вы вызываете startMove (evt, 'single') для перемещения одного объекта или startMove (evt, 'group') для перемещения группы, к которой она принадлежит.