به تازگی ، من با مشکلی روبرو شدم که در آن باید بلوک های متحرک را که شبیه منوها است ، بسازم. من به عملکرد دکمه های کشیدن در هر جهت و کنار هم نیاز داشتم.
پس از تحقیق در مورد كتابخانه ها ، كیت DND را انتخاب كردم. در آنجا با مستندات جالب و نمونه های زیادی مورد استقبال قرار می گیریم. مهمترین چیزی که ما به آن نیاز داریم مناطقی است که می توانیم موارد را بکشید و رها کنیم و عملکرد را به طور مؤثر سفارشی کنیم. نکته اصلی در اینجا استفاده از قلاب است: وقتی حرکت می کنیم ، این است استفاده شده قلاب و منطقه ای که در آن قرار می دهیم قابل استفاده قابل استفادهبشر خوب ، و انواع اضافی در قالب انیمیشن ها و مرتب سازی در یک ردیف.
UI و آماده سازی
کتابخانه ها را بارگیری کنید
yarn add @dnd-kit/core @dnd-kit/sortable
ما کل برنامه را پیچیده نمی کنیم ، بلکه یک مؤلفه خاص در جایی که DND رخ خواهد داد.
ما قرار دادیم حسگر در متن ما از آنها برای تعیین نحوه کنترل بلوک های کشیدن با لمس یا ماوس استفاده خواهیم کرد.
بعد از آزمایش با الگوریتم های برخورد ، من انتخاب کردم collisionDetection=pointerWithinبشر بهینه ترین مورد برای پرونده ما. این الگوریتم توسط مختصات کلیک و بلوک های تقاطع با آن هدایت می شود.
بیایید حالت بلوک فعال را که در حال کشیدن هستیم ایجاد کنیم. ما شناسه آن را در Handledragstart کنترل کننده در پایان کشیدن ، ما تماس خواهیم گرفت دستبند و تنظیم مجدد …