Bonjour,
J'ai fait appel à vous, il y a peu de temps pour un problème similaire, mais mes besoins ont évolués...
J'ai une div (nommée #svgsketch) dans lequel on peut dessiner des rectangles (chaque rectangle possède des connecteurs)
Lorsqu'on clique sur l'entête du rectangle cela permet de le bouger.
Mon souci :
Je clique pour la première fois sur l'entête de mon rectangle (premier mousemove) mon rectangle change de position directement sans suivre mon curseur, ensuite quand je lache et que je le reprend tout est ok. Seul mon premier mousemove ne prends pas les bonnes coordonnées.
mousedown :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
event.preventDefault();
var idNode = event.target.parentNode.getAttribute('id');
xbis = event.target.parentNode;
var ref = getRefCoords(idNode);
var event = ui_gcoords(event);   
var xRect = event.x - ref.x;
var yRect = event.y - ref.y;
Mes fonctions :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
function ui_gcoords(a){
    svg = $('#svgsketch').svg();
    var c=Math.round(a.pageX)-Math.round(svg.offset().left),a=Math.round(a.pageY)-Math.round(svg.offset().top);
    return{x:c,y:a}
};
function getRefCoords(group){
    var b = $("#"+group).get(0);
    var c = parseInt(b.getAttribute("x"));
    b = parseInt(b.getAttribute("y"));
    return{x:c,y:b}
};
mousemove :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
event.preventDefault();    
var coords_ = ui_gcoords(event);    
var translateX = coords_.x - xRect, coords = coords_.y - yRect;
var g = getRefCoords(idNode),e = $("#"+idNode).get(0);
e.setAttribute("x",translateX);
e.setAttribute("y",coords);
sketchpad.change(e);             
sketchpad.change(e,{transform:"translate("+translateX+","+coords+")"});
Merci de votre aide