La semaine dernière, je devais faire glisser la liste à gauche de la page vers la zone de droite et dessiner la fonction de l'arborescence des relations.
Après avoir regardé le dessin de conception, la première réaction est de tracer une ligne de relation avec HTML / 266906.html "> Canvas.
Après avoir obtenu cette fonction, j'ai constaté que c'était un défaut très grave pour le dessin avec toile. Autrement dit, s'il existe de nombreuses relations sur le côté gauche, vous devez en tirer des centaines et des milliers, et la grande hauteur de la toile sur toile a été déclarée lors de l'écriture du DOM. Dans de nombreux cas, la toile ne peut pas être utilisée.
Mais enregistrez toujours les résultats de la recherche.
Ce qui suit est le dessin de conception:
L'effet est le suivant:
Le code HTML et CSS ne sera pas collé. JS utilise principalement Drag et Canvas.
Fonction startDrag (ev) {ev.datatransfer.setdata (text, ev.target.innerText);} fonction allowdrop (ev) {ev.preventDefault ();} fonction op (ev) {ev.preventDefault (); $ ('. Main-Target'). Div class = main-target> '+ data +' </ div> '; $ ('. Main-target-wap '). GetElementById («Canvasone»), «Begin»); o »),« end »); '. Data + '</div>'; $ ('. Relation-test-box').Ce qui précède est la méthode de traînée et de traînée.
Fonction DrawlineOne (Canvas, Flag) {var Content = Canvas.getContex ('2d'); var position = {}; Context.beginpath (); endx2, posté.ndy2);} context.strokestyle = # 333; }} */ 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: (15 + 60 * (imggltenng-)), Endx = (imgltengle == 0)? Imglthengle + 15; Var imgglongs = ('. Img $ ('. Img box img '). Longueur; var endy = 15 + 60 * imggltenng return {débutx: 0, beginy: endy, endx: 155, endy: endy}}Ce qui précède est la méthode de la ligne de dessin en toile. J'espère que cela sera utile à l'apprentissage de tous, et j'espère que tout le monde soutiendra Vevb Wulin.com.