Je tente d'avoir une ligne aller entre les deux points sur ma page. Les images sont glagibles et placables dans les DIVS afin que leur position puisse modifier encore la ligne doit toujours les connecter.
jusqu'à présent, j'ai essayé cela avec une ligne personnalisée pour commencer là. P>
p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left"> <img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left"> <svg height="500" width="500"> <line id="Red1X" x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:3" /> </svg>
3 Réponses :
Il y a quelques points à faire ici.
Le SVG a besoin de certains CSS:
Continuer la fonction Drop , nous souhaitons maintenant définir la position de la ligne SVG sur les positions des cercles. La partie délicate ici est que nous devons savoir si c'est le cercle premier que nous connectons une ligne à. Pour accomplir cela, un booléen peut être utilisé sous la forme de quelque chose comme
Position: fixe ou Position: absolu afin que nous puissions la positionner sur les autres éléments.
z-index: 10 , où 10 est un nombre supérieur au z-index des autres éléments. Cela fera que la ligne soit affichée au lieu de sous les cases / cercles.
isfirstconnectedge . Si isfirsconnectedge === true , vous pouvez vous assurer que vous définissez les valeurs X, Y correctes.
Pour cet exemple, utilisons l'heuristique de 'le premier bord connecté utilisera toujours les valeurs X1 et Y1, le deuxième bord connecté et tous les autres régleront les X2 et Y2. Cela vous laisserait des ennuis si vous vouliez des flèches pour montrer la direction du bord, mais nous allons laisser cela pour le moment. Pour étendre grossièrement le code des étapes précédentes, nous ferons quelque chose comme celui-ci dans la fonction goutte :
var x = rect.x + (rect.width / 2) afin d'obtenir une ligne centrée.
Voici un exemple qui utilise JQuery et le plugin de positionnement de l'interface utilisateur JQuery.
ajustez le SVG afin qu'il devienne votre arrière-plan. De cette façon, cela ne sera pas dans la voie d'essayer de cliquer sur les points. P>
function positionLine(){
d1.data('position', d1.position());
d2.data('position', d2.position());
line.attr('x1', d1.data('position').left + (d1.width() / 2));
line.attr('y1', d1.data('position').top + (d1.height() / 2));
line.attr('x2', d2.data('position').left + (d2.width() / 2));
line.attr('y2', d2.data('position').top + (d2.height() / 2));
}
On goutte, vous devez repositionner la ligne en saisissant la position des points et en modifiant les x1, y1, x2, y2 code> coordonnées du SVG. P>
<svg style="position:absolute;top:0;left:0;height:100%;bottom:100%;z-index:-1">
<line id="Red1X" x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
OK, comme mentionné dans les commentaires, il est relativement facile lorsque les points sont dans la même ligne.
Les choses sont plus compliquées si vous en avez une autre - alors vous avez essentiellement besoin de: angle, pour l'appliquer à CSS Transform: Tourner la propriété et la longueur entre deux points / éléments, pour recalculer la largeur, car elle n'est plus la ligne droite. . Je déteste les maths :), donc j'ai utilisé des connaissances de bonnes personnes d'Internet: http://jsfiddle.net / Codepo8 / Bawuf / Light / (Crédits à Codepo8 strong>) P> Deux lignes les plus importantes: p> <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<div class="line">
</div>
Wow c'est vraiment bien fait! Prend en compte l'angle assez raisonnablement qui était exactement ce que je cherchais. Maintenant, je viens de faire fonctionner avec 10 "fils" différents. Merci!
Ok c'est génial mais comment puis-je garder la ligne d'affecter l'angle si tout le code ci-dessous. (Disons qu'il y a un autre div en dessous)
@Mccossum, np. ;) Pas sûr de comprendre votre dernière question - pourriez-vous configurer une démonstration rapide pour la situation décrite?
jsbin.com/tarewapuke/1/edit?html,css,js, Sortie (c'est une démo brute alors faites glisser les deux points rouges vers la même ligne pour commencer. Trop de code supplémentaire que je n'utiliserai pas simplement pour résoudre ce problème.) Assurez-vous que cliquez sur Auto Run JS.
Ah, donc, le problème est de séparer plusieurs points ... Je verrai ... Ma première idée est d'obtenir le point dressé actuel (et sa paire), puis le script peut être minimisé et devrait fonctionner correctement ...
@MCCossum, principal problème de votre code est que vous aviez des balises HTML non valides (balises divniquées), de sorte que cela explique un comportement étrange, voici tous - fixe, et minimisé: jsfiddle.net/8vff7v1w (conditions supplémentaires résolues Problème du code dupliqué). J'espère que maintenant tout fonctionne bien ....
Oh mec ... Oh mec ... Merci, je ne peux pas croire que j'ai manqué les erreurs de div. Les déclarations «si» semblent la faire courir assez bien maintenant!
Vous utilisez l'identifiant
div1 plus d'une fois. L'identifiant doit être uniqueHein, il est facile quand des points sont dans la même ligne, mais pour le reste des cas - vous aurez besoin de mathématiques: gist.github.com/conorbuck/2606166 :) Question intéressante, de toute façon ...