Javascript Girl
  1. Javascript Girl
  3. SVG traînant pour le groupe
Intereting Posts
Le mode le plus rapide pour vérifier une chaîne contient une autre sous-chaîne en JavaScript? JavaScript: comment ajouter des sauts de ligne dans une zone de texte HTML? L'anniversaire est-il l'âge de l'année précédente? Déclenchez un téléchargement de fichier sur le bouton du bouton Javascript avec le contenu de DOM Puis-je écrire des applications iOS (Cocoa) en JavaScript? Comment connecter Google et permettre à mon utilisateur d'inviter ses contacts AJAX et l'utilisateur quittent une page Chrome.tabs.executeScript dans l'onglet INFOURI Suppression de l'élément du tableau dans l'état des composants Comment filtrer une liste dans AngularJS en utilisant plusieurs liens Google Maps supprime les contrôles IOS select onchange not firing Obtenir la couleur de fond du document Attributs de classe C # inaccessibles en Javascript Comment remplacer une fonction à l'aide d'un utilisateur?

SVG traînant pour le groupe

J'essaie d'entraîner le déplacement de groupe et d'individu dans le groupe. Dans le groupe, il y a 3 cercles. Les cercles bleu et gris doivent traîner individuellement (par onmousedown), et orange on est pour le déplacement en groupe (par onclick). Le problème est qu'après avoir traîné tout le groupe, mais vous devez essayer à http://www.atarado.com/stackOF/drag-with%20problems.svg et voir le code.

Toute aide serait appréciée. Merci.

Je pense que j'ai résolu votre problème: http://dl.dropbox.com/u/169269/group_drag.svg

Le problème était que le traînage unique modifiait les attributs cx et cy du cercle, mais la traînée de groupe entraînait la transformation de l'ensemble du groupe. J'ai simplifié les choses afin que tout fonctionne à l'aide de transformations et que vous ayez besoin d'un seul ensemble de fonctions pour les deux: 

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) }

Maintenant, vous appelez startMove (evt, 'single') pour déplacer un objet unique, ou startMove (evt, 'group') pour déplacer le groupe auquel il appartient.