في الأسبوع الماضي ، كنت بحاجة إلى سحب القائمة على يسار الصفحة إلى المنطقة اليمنى ورسم وظيفة شجرة العلاقة.
بعد النظر في رسم التصميم ، يكون رد الفعل الأول هو رسم خط العلاقة مع HTML/266906.html "> Canvas.
بعد الحصول على هذه الوظيفة ، وجدت أنها عيب خطير للغاية للرسم باستخدام قماش. أي إذا كانت هناك العديد من العلاقات على الجانب الأيسر ، فأنت بحاجة إلى رسم مئات وآلافهم ، وتم الإعلان عن الارتفاع الواسع للقماش عند كتابة DOM. في كثير من الحالات ، لا يمكن استخدام قماش.
ولكن لا يزال تسجيل نتائج البحث.
ما يلي هو رسم التصميم:
التأثير على النحو التالي:
لن يتم لصق رمز HTML و CSS. يستخدم JS بشكل رئيسي السحب والقماش.
وظيفة startDrag (ev) {ev.datatransfer.setData (text ، ev.target.innertext) ؛} وظيفة alowdrop (ev) {ev.preventDefault () ؛ $ ('. الهدف الرئيسي'). Div = Target> ' + Data +' </viv> '؛ GetElementByid ('canvasone') ، 'Begin') ؛ " Data + '</viv>' ؛ما سبق هو طريقة السحب والسحب.
دالة drawlineOne (canvas) {var content = canvas.getContext ('2d') ؛ context.beginpath () endx2 ، super.ndy2) ؛} context.strokestyle = #333 ؛ } */وظيفة getCanvasone () {var imglength = $ ('. 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 *imglength return {beginx: 0 ، beginy: endy ، endx: 155 ، endy: endy}}ما سبق هو طريقة رسم القماش. آمل أن يكون ذلك مفيدًا لتعلم الجميع ، وآمل أن يدعم الجميع VEVB Wulin.com.