سحب وإسقاط الأدوات والتجهيزات المسبقة

1) المفهوم والسيناريوهات

أدوات السحب والإسقاط عبارة عن كتل تفاعلية (بطاقات الرسم البياني والجداول والفلاتر وأزرار العمل) يضعها المستخدم بحرية على اللوحة بالإشارة إلى الشبكة. التعيينات المسبقة - التخطيطات والأنماط المحفوظة (تخطيط + سمة + معلمات) التي يمكن تطبيقها ومشاركتها وتحريرها بسرعة.

• تجميع لوحة القيادة من الكتل الجاهزة (بطاقات KPI، الرسوم البيانية، المرشحات).
• تغيير سريع في التصميم من خلال العروض المسبقة «Compact' و» Analytics' و «Presentation».
• التحرير المشترك: يضع المنتج الأدوات، ويقوم المحلل بإعداد المصادر.
• منشور للقراءة فقط لأصحاب المصلحة.

2) المبادئ المعمارية

1. الشبكة أولاً: تحديد الموقع في الأعمدة/الصفوف المنطقية (12/24)، البكسل - المشتقات.
2. Snaping & Guides: أدلة مغناطيسية، تلتصق بالشبكة والجيران، تتماشى.
3. إدراك القيود: محددات الحجم/الجانب، الحد الأدنى/الحد الأقصى، جانب القفل.
4. Safe-by-fault: continuosave autosave, transactional publishing, undo/redo.
5. A11y-first: DnD من لوحة المفاتيح والتعبير عن التغييرات.
6. جاهز للوقت الحقيقي: CRDT/OT لجلسات متعددة اللاعبين.
7. موضوع: رموز التصميم، المواضيع المسبقة، أوضاع الضوء/الظلام/التباين.
8. المحمول: التصدير/الاستيراد JSON/YAML ؛ إصدار الدائرة.

3) نموذج البيانات (مبسط)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) الشبكة واللقطات والأدلة

الشبكة: 12 مكبر صوت لسطح المكتب، و 6 مكبرات للحاسوب اللوحي، و 4 مكبرات للهاتف ؛ «ارتفاع الصف» هو نفسه بالنسبة للملعب العمودي المستقر.
الانطلاق إلى الحواف/المراكز ؛ «مغناطيس» في 4/8 px ؛ أدلة ذكية عند الاقتراب من الجيران.
التدفق التلقائي: النقل التلقائي أدناه في حالة الاصطدام ؛ خوارزمية «الكتل المتساقطة».
الاستجابة: نقاط التوقف → «نقاط التوقف» البديلة لكل نقطة توقف.

5) أحداث DnD والدول

События: "dragStart' و" drag "و" dragOver "و" drop "و" resizeStart' و "resize" و "resizeEnd' و" select "و" group "و" ungroup "و" إعادة ترتيب "و" التراجع "و" إعادة ".

• شبح/معاينة مسار شفاف أثناء السحب.
• العناصر الفرعية: المناطق المسموح بها (خضراء)، محظورة (حمراء).
• خريطة التصادم - حساب سريع للخلايا المشغولة (شجرة بيتسيت/فاصلة).

6) رفع، محاذاة، مؤشر z

مقاومة القبضة في الزوايا + عقد «التحول» للحفاظ على النسب.
محاذاة المجموعة: «يسار/يمين»، «وسط»، «توزع بالتساوي».
مستويات التراكب: «z» مع تقييد النطاق والأزرار الأمامية/الخلفية.

7) المجموعات والحاويات والتعشيش

المجموعات: اختيار متعدد، سحب وإسقاط مشترك، محاذاة المجموعة.
حاوية Widget: علامات تبويب، أكورديون، دوار - يعرفون كيفية قبول أدوات الأطفال.
محطات إيقاف الحاويات: شبكة خارجية ≠ داخلية (أعمدة أخرى).

8) التصويبات المسبقة (النماذج) والنسخ

أنواع التجهيزات المسبقة: تخطيط، سمة، مجموعة أدوات، تخطيط + بيانات.
الإصدار: مخططات «semver» والهجرات (خريطة ميدانية، افتراضات).
معاينة وتطبيق قبل التقديم.
تحديد النطاق المسبق: شخصي، فريق، عالمي ؛ قراءة/تحرير الحقوق.
التصدير/الاستيراد: JSON/YAML, checksum signature, version compatibility check.

9) إمكانية الوصول (A11y) ولوحة المفاتيح

• «أدخل/فضاء» - ابدأ النقل ؛ السهام - الانتقال إلى التباعد الشبكي ؛ 'التحول' + السهام - التباعد المتسارع ؛ «Esc» - إلغاء.
• المجموعة 'Ctrl/Cmd + G' ؛ 'Ctrl/Cmd + Shift + G' - ungroup.
• "Alt' - إيقاف التشغيل مؤقتًا للشبكة.
• صوت التمثيل SR: "انتقل إلى (x، y). التمسك: على. الصراع: نعم/لا"
• حلقات التركيز، مقابض كبيرة، مناطق إسقاط مع وصف.

10) أنماط اللمس والجوال

الضغط الطويل (300-500 مللي ثانية) لبدء DnD.
زيادة الأهداف (40-48 px كحد أدنى).
أشرطة الأدوات التكيفية (الرصيف السفلي).
وضع التحرير: قفل التمرير بالقماش، التمرير التلقائي العمودي عند الانتقال إلى الحافة.

11) إجراءات من الأدوات (أدوات قابلة للتنفيذ)

CTA (زر) مدمج، قائمة السياق، استنساخ السحب (الازدواجية البديلة).
«التجهيزات المسبقة السريعة» للأداة (الكثافة، الأسطورة، مخطط الألوان).
الدول: التحميل/الفراغ/الخطأ، الكتل الآمنة («البيانات متخلفة»).

12) التعاون والنشر

الوقت الحقيقي: CRDT (على سبيل المثال، Yjs) أو OT (نهج Quill) - مؤشرات المشاركين، أقفال المجموعة.
الحقوق: 'Owner', 'Editor', 'Viewer'; نشر لقطة ثابتة.
المسارات: مشروع استعراض → → المنشور ؛ مقارنة التغييرات (تخطيطات diff).

13) التراجع/Redo و autosave

حافلة القيادة: كل عملية هي أمر بـ «افعل/تراجع».
تسجيل الدخول على العميل (في الذاكرة + استمرار دوري)، حد الطول.
حفظ تلقائي: كل N ثانية/عن طريق «ille»، مع مؤشر «Saved».

14) رموز التصميم والتصميم

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

تبديل الموضوعات دون إعادة حساب التخطيط (الرموز المرئية فقط).
تباين AA/AAA، وضع التباين العالي، سمة داكنة مع اللون الرمادي الصحيح.

15) الأداء

العرض حسب الطبقات (القماش/الويب للرسوم البيانية المعقدة، DOM للكروم).
افتراضية القائمة/الجدول، دواسة الوقود 'drag' (16 ms)، requestAnimationFrame.
عرض Diff: أعد رسم الأدوات المعدلة فقط.
ذاكرة التخزين المؤقت تحسب الاصطدامات والإرشادات.

16) أمن المحتوى وحمايته

Sunbox لودجات HTML (iframe، CSP، أعلام 'sandbox').
تحديد الإسقاط: أنواع القائمة البيضاء (ملفات، وصلات، وصفات JSON المسبقة) ؛ التحقق من الحجم والمحتوى.
الحقوق في التعيينات المسبقة (RBAC/ABAC)، مراجعة الصادرات/الواردات.

17) واجهة برمجة التطبيقات Widget (عقد)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

أحداث دورة الحياة هي «تركيب» و «تغيير الحجم» و «الرؤية».
التحقق من صحة الدعائم قبل النشر.

18) الاستيراد/التصدير والهجرة

الصادرات: 'شبكة'، 'أدوات'، 'موضوع'، 'ميتا'.
الاستيراد: التحقق من إصدارات المخطط، الهجرات التلقائية (الخريطة الميدانية/التخلف عن السداد)، تقرير.
ضبط ملف قفل مع تجزئة لضمان النزاهة.

19) Hotkeys (موصى به)

الملاحة: '←↑→↓' - تحرك ؛ «تحول» + سهام - خطوة سريعة.
Recise: "Alt' + السهام.
العمليات: 'Ctrl/Cmd + D' - مكررة ؛ المجموعة 'Ctrl/Cmd + G' ؛ 'Ctrl/Cmd + Shift + G' - ungroup.
المستويات: «[»/«]» - للخلف/للأمام على مؤشر z.
Undo/Redo: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (или 'Y').
التطبيقات المسبقة: 'Ctrl/Cmd + 1.. 9 '- تطبيق المحفوظات بسرعة.

20) أنماط UX

أدلة سريعة عند الإطلاق الأول (التشغيل الدقيق لـ 3-5 خطوات).
وضع الشبكة: تبديل «شبكة العرض/الإخفاء».
تلميحات داخلية عن الاصطدامات («غير متوفرة: الحد الأدنى لعرض الودج = 3»).
تاريخ التخطيط: يعود إلى الإصدار السابق.

21) خطة الاختبار

الوحدة: حساب الاصطدام، المفاجئة، التحقق من القيود.
التكامل: DnD mouse/tap/keyboard ؛ ؛ حاويات.
E2E: تجميع لوحة قياس من الصفر، وتطبيق نظام الإعداد المسبق، والنشر، والتصدير/الاستيراد.
الفوضى: التأخير، فقدان الاتصال (الوقت الحقيقي)، تضارب الحقوق.
A11y: نصوص لوحة المفاتيح، تمثيل صوت SR، التباين.

22) قائمة التنفيذ المرجعية

• تم تكوين الشبكة/نقاط التوقف والتقاط
• أعمال الدقة/المجموعات/المواءمة واختبارها
• تمكين لوحة المفاتيح DnD و ScreenTips
• Autosave، التراجع/إعادة، تخطيط التاريخ
• النصوص المسبقة: النسخ والحقوق والتصدير/الاستيراد
• الموضوعات ورموز التصميم، وضع التباين العالي
• التعاون في الوقت الحقيقي وتسوية النزاعات
• تحديد الإسقاط، التحقق من صحة الملف، صندوق الرمل HTML
• المقاييس: التبني، وقت التنسيب الأول، أخطاء الاصطدام

23) الأسئلة الشائعة المصغرة

لماذا فقط شبكة، وليس الإحداثيات الحرة ؟

تبسط الشبكة المحاذاة والفيروس التاجي والقابلية للنقل والأداء مسبقًا.

كيف تخزن تخطيطات مختلفة لنقاط التوقف ؟

تحتوي كل أداة على «نقاط» عند نقطة التوقف (سطح المكتب/الجهاز اللوحي/الهاتف المحمول) مع استرداد تلقائي.

ماذا تختار للتعاون - OT أو CRDT ؟

والأفرقة أسهل في حالات النزاعات غير المتصلة بالإنترنت ؛ OT - حسنًا لعمليات النص الخطي. بالنسبة للتخطيط، غالبًا ما يتم أخذ CRDT.

المجموع

أدوات Good Drag & Drop ليست فقط "سحب وإسقاط. "هذه هي: شبكة صارمة والتقاط، والمجموعات المريحة والمواءمة، وإمكانية الوصول إلى لوحة المفاتيح، والتجهيزات المسبقة المستقرة مع الإصدارات والصادرات، والمنشورات الآمنة والتعاون. قم ببناء هذا حول نموذج بيانات موثوق به، و UX مدروس جيدًا وخطة اختبار - وسيصبح المنشئ سريعًا ومفهومًا ومقاومًا لنمو المحتوى والأوامر.