Last week, I needed to drag the list on the left of the page to the right area and draw the function of the relationship tree.
After looking at the design drawing, the first reaction is to draw a relationship line with html/266906.html "> Canvas.
After getting this function, I found that it was a very serious defect for drawing with Canvas. That is, if there are many relationships on the left side, you need to draw hundreds and thousands of them, and the wide height of the Canvas canvas has been declared when writing the DOM. In many cases, Canvas cannot be used.
But still record the research results.
The following is the design drawing:
The effect is as follows:
HTML and CSS code will not be pasted. JS mainly uses drag and canvas.
Function StartDrag (EV) {Ev.datatransfer.setdata (text, Ev.Target.Innertext);} Function Alowdrop (EV) {EV.PreventDefault ();} Function OP (EV) {EV.PreventDefault (); VAR LENGTH = $ ('. Main-Target'). LENGTH; if (length == 0) {DropTomain (EV);} Else {DropTorelate (EV);}} Function Droptomain (EV) ETDATA ( Text); var _html = '<div class = main-target>' + data + '</div>'; $ ('. Main-Target-wrap'). Width ('auto'). } Function DropTorelate (EV) {// DrawLineone (Document.GetelementByid ('Canvasone'), 'Begin'); o '),' End '); // Insert pictures and pictures Initialize the click event var _img = $ ('<IMG SRC = Inner.png>'); $ ('. IMGBOX'). Append (_img); _img.Click (showRelationbox); // Write data var data = ev. Datatransfer.getdata ('Text'); VAR _html = '<Div class = item-text>' + data + '</div>'; $ ('. Relation-test-box').The above is the method of dragging and dragging. I also read the rookie tutorial while writing.
Function DrawLineone (Canvas, Flag) {var content = Canvas.GetContext ('2D'); VAR POSITION = {}; if (Flag == Begin) {POSITION = on ();} else {position = getcanvastwoposity ();} Context.beginpath (); context.moveto (position.beginx, posity.beginy); context.lineto (poseition.endx, posity.endy); if (posity.ndx2 && posit Ion.endy2) {context.lineto (position.endx2 , posted.ndy2);} context.strokestyle = #333; context.stroke ();}/** *The left relationship line *@Returns {{beginx: *, beginy: *, endx: *, endy: *} } */Function getcanvasonePosition () {var IMGLENGTH = $ ('. Imgbox img'). Length; Var Beginx = (imglength == 0)? 0: 77, beginy = (IMGLENGTH == 0)? 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: (15 + 60 * (IMGLENGTH-)), endx = (imglength == 0)? 155: 77, endy = 60 * imglength + 15; var position = {beginx: beginy, endx: endx, endy: endy } ; IF (Imglength> 0) {posity.endx2 = 155; posity.endy2 = endy;} Return positive;} Function getcanvastwopositation () {Var imglength = ('. Img $ ('. Img Box img '). LENGTH; var endy = 15 + 60 *Imglength Return {beginx: 0, beginy: endy, endx: 155, endy: endy}}The above is the method of the Canvas drawing line. The code is not difficult, mainly because the starting coordinates of the analysis line are more troublesome. I hope it will be helpful to everyone's learning, and I hope that everyone will support VEVB Wulin.com.