इस प्रोजेक्ट के बारे में

React-Draggable एक React घटक पुस्तकालय है जो तत्वों को खींचने योग्य बनाता है। यह react-grid-layout संगठन का हिस्सा है और npm पर react-draggable के रूप में प्रकाशित है। पुस्तकालय दो घटक प्रदान करता है। `<Draggable>` किसी मौजूदा तत्व को लपेटता है और उसे ड्रैग इवेंट हैंडलर और शैलियों के साथ विस्तारित करता है, आइटमों को CSS ट्रांसफ़ॉर्म के माध्यम से स्थानांतरित करता है ताकि वे अपनी वर्तमान स्थिति की परवाह किए बिना खींचे जा सकें। यह DOM में कोई रैपर तत्व नहीं बनाता है। `<DraggableCore>` उन उपयोगकर्ताओं के लिए निम्न-स्तरीय विकल्प है जिन्हें पूर्ण नियंत्रण की आवश्यकता होती है: यह बिना स्थिति या शैलियों के प्रबंधन के ड्रैग कॉलबैक प्रदान करता है और ट्रांसफ़ॉर्म सेट नहीं करता है, स्थिति को डेवलपर पर छोड़ देता है। README React-Resizable और React-Grid-Layout को DraggableCore के उपयोग उदाहरण के रूप में इंगित करता है। `<Draggable>` के मुख्य प्रॉप्स में axis (both, x, y, none), bounds (parent, CSS selector, या 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 मॉड्यूल और CommonJS आयात उदाहरण शामिल हैं। एक उल्लेखनीय अनुभाग nodeRef को कवर करता है: nodeRef प्रॉप पास करने से ReactDOM.findDOMNode() अपग्रेड चेतावनियों से बचा जाता है, और README दिखाता है कि कस्टम घटकों के लिए ref और props दोनों को कैसे अग्रेषित किया जाए। एक अन्य अनुभाग नियंत्रित बनाम अनियंत्रित उपयोग की व्याख्या करता है, जिसमें दिखाया गया है कि Draggable के राज्य प्रबंधन का उपयोग करते हुए programmatic repositioning के लिए position प्रॉप कैसे पास करें। Content Security Policy अनुभाग बताता है कि react-draggable पहले ड्रैग पर दस्तावेज़ के head में एक छोटा style तत्व इंजेक्ट करता है (enableUserSelectHack व्यवहार, जो डिफ़ॉल्ट रूप से चालू है) तो ड्रैगिंग के दौरान टेक्स्ट चयन को रोकने के लिए। सख्त CSP के तहत style-src में 'unsafe-inline' के बिना, यह अवरुद्ध हो जाता है। तीन उपाय दस्तावेज़ित हैं: एक nonce प्रॉप पास करें, webpack के __webpack_nonce__ वैश्विक फॉलबैक पर भरोसा करें, या enableUserSelectHack={false} सेट करें और दो चयन नियमों को अपनी खुद की स्टाइलशीट में जोड़ें। nonce केवल तभी पढ़ा जाता है जब तत्व पहली बार बनाया जाता है, और पृष्ठ पर सभी Draggable/DraggableCore द्वारा एक ही तत्व साझा किया जाता है। रिपॉजिटरी में एक डेमो साइट, एक चेंजलॉग, CI वर्कफ़्लो, और योगदान निर्देश शामिल हैं जो yarn dev, yarn test, और make टारगेट का उपयोग करके एक रिलीज़ चेकलिस्ट को कवर करते हैं। परियोजना MIT लाइसेंस प्राप्त है।