На прошлой неделе мне нужно было перетащить список слева от страницы в правую область и провести функцию дерева отношений.
Посмотрев на рисунок дизайна, первая реакция состоит в том, чтобы нарисовать линию отношений с HTML/266906.html "> Canvas.
После получения этой функции я обнаружил, что это был очень серьезный недостаток для рисования с холстом. То есть, если на левой стороне есть много отношений, вам нужно нарисовать сотни и тысячи из них, и при написании Дома была объявлена широкая высота холста. Во многих случаях холст не может быть использован.
Но все еще записывают результаты исследования.
Ниже приведено рисунок дизайна:
Эффект заключается в следующем:
Код HTML и CSS не будет вставлен. JS в основном использует перетаскивание и холст.
Function startDrag (ev) {ev.datatransfer.setData (text, ev.target.innertext);} function alowdrop (ev) {ev.preventdefault ();} function op (ev) {ev.preventDefault (); $ ('. Main-Target'). Div Class = Main-Target> ' + Data +' </div> '; GetElementbyId ('canvasone'), 'begin'); '. Data + '</div>';Приведенное выше метод перетаскивания и перетаскивания.
Функция DrawlineOne (Canvas, Flag) {var Content = canvas.getContext ('2d'); Context.beginpath (); endx2, opred.ndy2);} context.strokestyle = #333; }} */Функция getCanvasoneposition () {var imgleny = $ ('. 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: 15: (15 + 60 * (Imglength-), Endx = (imglength == 0)? Imglength + 15; Var imglength = ('. Img $ ('. Img box img '). Length; var endy = 15 + 60 *eartenge return {beginx: 0, beginy: endy, endx: 155, endy: endy}}Выше представляет собой метод линии чертежа холста. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Vevb wulin.com.