عن المشروع

React-Draggable هي مكتبة مكونات React لجعل العناصر قابلة للسحب. وهي جزء من منظمة react-grid-layout وتُنشر على npm باسم react-draggable. توفر المكتبة مكونين. `<Draggable>` يغلف عنصرًا موجودًا ويمده بمعالجات أحداث السحب والأنماط، وينقل العناصر عبر CSS Transforms بحيث يمكن سحبها بغض النظر عن تحديد موضعها الحالي. لا ينشئ عنصرًا مغلفًا في DOM. `<DraggableCore>` هو خيار منخفض المستوى للمستخدمين الذين يحتاجون تحكمًا كاملاً: يوفر استدعاءات السحب دون إدارة الحالة أو الأنماط ولا يضبط التحويلات، تاركًا تحديد الموضع للمطور. يشير README إلى React-Resizable وReact-Grid-Layout كأمثلة على استخدام DraggableCore. الخصائص الرئيسية لـ `<Draggable>` تشمل axis (both, x, y, none)، bounds (parent، محدد CSS، أو كائن left/top/right/bottom)، محددات cancel و handle CSS، التقاط الشبكة، position للاستخدام المتحكم به، positionOffset، scale للآباء المحولين، disabled، واستدعاءات onStart و onDrag و onStop و onMouseDown. تحتوي DraggableData التي تُمرر إلى المعالجات على node و x و y و deltaX و deltaY و lastX و lastY. إرجاع false من onStart يلغي السحب. تعيين className أو style أو transform على `<Draggable>` هو خطأ؛ تلك تنتمي إلى العنصر الفرعي. يُوثق README التوافق: الإصدار 4.x يدعم React 16.3+، و3.x يدعم React 15–16، و2.x يدعم React 0.14–15. تتضمن أنواع TypeScript. التثبيت عبر npm أو yarn، مع أمثلة استيراد ES module و CommonJS. قسم بارز يغطي nodeRef: تمرير خاصية nodeRef يتجنب تحذيرات إهمال ReactDOM.findDOMNode() في React Strict Mode، ويوضح README كيفية تمرير كل من ref والخصائص للمكونات المخصصة. قسم آخر يشرح الاستخدام المتحكم به مقابل غير المتحكم به، ويوضح كيفية تمرير خاصية position لإعادة تحديد الموضع برمجيًا مع الاستمرار في استخدام إدارة حالة Draggable. قسم سياسة أمان المحتوى (CSP) يشرح أن react-draggable يحقن عنصر نمط صغير في رأس المستند عند أول سحب (سلوك enableUserSelectHack، مفعل افتراضيًا) لمنع تحديد النص أثناء السحب. تحت CSP صارم بدون 'unsafe-inline' في style-src، يتم حظر ذلك. تُوثق ثلاثة علاجات: تمرير خاصية nonce، أو الاعتماد على fallback العام لـ webpack's __webpack_nonce__، أو تعيين enableUserSelectHack={false} وإضافة قاعدتي التحديد إلى ورقة الأنماط الخاصة بك. تتم قراءة nonce فقط عند إنشاء العنصر لأول مرة، ويتم مشاركة نفس العنصر من قبل كل Draggable/DraggableCore في الصفحة. يتضمن المستودع موقعًا تجريبيًا، وسجل تغييرات، وسير عمل CI، وتعليمات المساهمة التي تغطي yarn dev و yarn test وقائمة تحقق للإصدار باستخدام أهداف make. المشروع مرخص بموجب MIT.