La semana pasada, necesitaba arrastrar la lista a la izquierda de la página al área derecha y dibujar la función del árbol de relaciones.
Después de mirar el dibujo de diseño, la primera reacción es dibujar una línea de relación con HTML/266906.html "> lienzo.
Después de obtener esta función, descubrí que era un defecto muy grave para dibujar con lienzo. Es decir, si hay muchas relaciones en el lado izquierdo, debe dibujar cientos y miles de ellas, y la amplia altura del lienzo del lienzo se ha declarado al escribir el DOM. En muchos casos, el lienzo no se puede usar.
Pero aún registra los resultados de la investigación.
El siguiente es el dibujo de diseño:
El efecto es el siguiente:
El código HTML y CSS no será pegado. JS usa principalmente arrastre y lienzo.
Función startDrag (ev) {ev.datatransfer.setData (text, ev.target.inntex);} function alowdrop (ev) {ev.preventDefault ();} function op (ev) {ev.preventDefault (); $ ('. Main-Target'). Div class = Main-Target> ' + Data +' </div> '; GetElementById ('Canvasone'), 'Begin'); 'IMGBOX'). Datos + '</div>';Lo anterior es el método de arrastrar y arrastrar.
Funcion DrawlineOn (Canvas, Flag) {var content = Canvas.getContext ('2d'); Context.beginpath (); endx2, publica.ndy2);} context.strokestyle = #333; }} */Function getCanVasePosition () {var imglength = $ ('. Imgbox img'). 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: (15 + 60 * (imglength-)), endx = (imglength == 0)? IMGLIONS + 15; Var imglength = ('. Img $ ('. Img box img '). Longitud; var endy = 15 + 60 *imglength return {beginx: 0, beginy: endy, endx: 155, endy: endy}}Lo anterior es el método de la línea de dibujo de lienzo. Espero que sea útil para el aprendizaje de todos, y espero que todos apoyen a VEVB Wulin.com.