منصوبے کے بارے میں

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 سلیکٹرز، grid snapping، کنٹرول شدہ استعمال کے لیے position، positionOffset، ٹرانسفارم شدہ والدین کے لیے scale، disabled، اور onStart، onDrag، onStop، اور onMouseDown کال بیکس شامل ہیں۔ ہینڈلرز کو دیا جانے والا DraggableData node، x، y، deltaX، deltaY، lastX، اور lastY پر مشتمل ہوتا ہے۔ onStart سے false واپس کرنے پر ڈریگ منسوخ ہو جاتا ہے۔ `<Draggable>` پر className، style، یا transform سیٹ کرنا ایک غلطی ہے؛ یہ چائلڈ عنصر پر ہونے چاہئیں۔ 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 پراپ پاس کرنے سے React Strict Mode میں ReactDOM.findDOMNode() کے ڈیپریکیشن وارننگز سے بچا جا سکتا ہے، اور README دکھاتا ہے کہ کسٹم کمپوننٹس کے لیے ref اور props دونوں کیسے فارورڈ کیے جائیں۔ ایک اور حصہ کنٹرول شدہ بمقابلہ غیر کنٹرول شدہ استعمال کی وضاحت کرتا ہے، اور دکھاتا ہے کہ Draggable کے اسٹیٹ مینجمنٹ کا استعمال جاری رکھتے ہوئے پروگرامیٹک ری پوزیشننگ کے لیے position پراپ کیسے پاس کی جائے۔ Content Security Policy کا حصہ وضاحت کرتا ہے کہ react-draggable پہلی ڈریگ پر دستاویز کے head میں ایک چھوٹا اسٹائل عنصر داخل کرتا ہے (enableUserSelectHack رویہ، جو بطور ڈیفالٹ آن ہوتا ہے) تاکہ ڈریگ کے دوران متن کے انتخاب کو روکا جا سکے۔ style-src میں 'unsafe-inline' کے بغیر سخت CSP کے تحت، یہ بلاک ہو جاتا ہے۔ تین حل دستاویز کیے گئے ہیں: nonce پراپ پاس کریں، webpack کے __webpack_nonce__ گلوبل فال بیک پر انحصار کریں، یا enableUserSelectHack={false} سیٹ کریں اور دو سلیکشن رولز اپنی اسٹائل شیٹ میں شامل کریں۔ nonce صرف اس وقت پڑھا جاتا ہے جب عنصر پہلی بار بنایا جاتا ہے، اور وہی عنصر صفحے پر ہر Draggable/DraggableCore کے ذریعے شیئر کیا جاتا ہے۔ ریپوزٹری میں ایک ڈیمو سائٹ، چینج لاگ، CI ورک فلو، اور تعاون کی ہدایات شامل ہیں جن میں yarn dev، yarn test، اور make ٹارگٹس استعمال کرنے والی ریلیز چیک لسٹ کا احاطہ کیا گیا ہے۔ پروجیکٹ MIT لائسنس یافتہ ہے۔