कोणीय 2 (v2.0.0-beta.15)

Question

का उपयोग करके ड्रैग और ड्रॉप को कार्यान्वित करने के लिए कैसे करें मैं कोणीय में एक साधारण ड्रैग एन ड्रॉप सूची को कार्यान्वित करना चाहता हूं, उदाहरण के लिए एक किराने का सामान जो मैं अपना ऑर्डर बदल सकता हूं।

आईवी ने https://github.com/akserg/ng2-dnd का उपयोग करने से पहले इसे लागू किया लेकिन मेरी समस्या यह है कि मैं कोणीय 2.0.0-beta.15 का उपयोग करता हूं और मैं वर्तमान में इसे अपग्रेड नहीं कर सकता इसलिए मुझे इस संस्करण का समर्थन करने वाला कुछ ढूंढना है। आईवी ने इस पुस्तकालय के विशिष्ट कामों को देखने की कोशिश की और कुछ भी नहीं जो मेरी ver फिट बैठता है। मुझे उस सटीक व्यवहार की ज़रूरत है। the more specific example of this library is। शायद किसी को किसी भी तरह से पता है कि मैं इसे अपने आप भी कर सकता हूं, वैसे भी अच्छा होगा, समय बचाने के लिए कुछ पुस्तकालय पसंद करते हैं।

(टाइपप्रति का उपयोग कर im)

अगर वहाँ कोई एक सूची को पुन: क्रम के लिए अन्य तरीके से कुछ अन्य समाधान है और एक उदाहरण है कि बहुत धन्य हो जाएगा दे सकते हैं कि।

Answer 1

: यदि आप कस्टम कार्यान्वयन के साथ एक सौदा नहीं करते हैं तो आप इस सूची से कुछ पुस्तकालयों का उपयोग कर सकते हैं

ठीक है, तो फाई उत्तर देने वाले लोगों के लिए धन्यवाद।

जवाब यह है कि मुझे मदद की सबसे कैसे इस मुद्दे को मैं NG2-DND के साथ किया था ठीक करने के लिए किया गया था:

मैं सिर्फ devDependencies को जोड़ा गया:

"ng2-dnd" : "1.5.0" 

रन npm install और मैं जाने के लिए अच्छा था और पुस्तकालय का उपयोग github उदाहरणों में करें।

Answer 2

आप ड्रैगुला 2 गीथब रेपो से एक विशिष्ट संशोधन का उपयोग कर सकते हैं।

1 - package.json खोलें और "dependencies"

2 के लिए स्क्रॉल - पिछले प्रतिबद्ध साथ Github लिंक करने के लिए ng2-dragula पैकेज संपादित करें इससे पहले कि वे RC.1 को

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007" 

3 बंद - ng2-dragula हटाएं node_modules में फ़ोल्डर और के साथ अपने package.json से इसे पुनः स्थापित

npm install 

Answer 3

कोणीय 2 का उपयोग करके ड्रैग और ड्रॉप को अनुमति देने के दो सबसे आम तरीके हैं। सबसे पहले कोणीय आधारित ओपन सोर्स लाइब्रेरीज़ में से एक का उपयोग कर रहा है (कई हैं); और दूसरा ड्रैग और ड्रॉप के लिए jQuery UI लाइब्रेरी का उपयोग कर रहा है। कुछ जांच के बाद मैंने पाया कि उनमें से अधिकतर कोणीय 1.x के लिए बने हैं और अभी भी मुझे आवश्यक सभी सुविधाओं का समर्थन नहीं करते हैं।

इसलिए मैंने अपने टाइपस्क्रिप्ट पुस्तकालयों का उपयोग करके jQuery का उपयोग करके ड्रैग और ड्रॉप के कार्यान्वयन का निर्णय लिया है।

ड्रैग & का समर्थन करने के लिए मेरी परियोजना में jQuery जावास्क्रिप्ट फ़ाइलों को प्राप्त करने के साथ प्रारंभ करें और index.html फ़ाइल। कोणीय + टाइपस्क्रिप्ट प्रोजेक्ट में उपयोग करने से पहले jQuery फ़ाइलों को प्राप्त करने के बाद इसे jquery.d.ts और jqueryui.d.ts की आवश्यकता होती है जो ड्रैग और ड्रॉप के लिए विशिष्ट विशिष्ट कार्यान्वयन प्रदान करेगी।

चरण 1

परियोजना के रूट निर्देशिका पर निम्न कमांड निष्पादित करें:

// install tsd 
npm install tsd -g 
// install jquery.d.ts 
tsd install jquery --save 
// install jqueryui.d.ts 
tds install jqueryui --save 

आदेशों से ऊपर jQuery के लिए प्रकार विशिष्ट मानचित्रण स्थापित हो जाएगा जैसा कि यहाँ दिखाया परियोजना के फ़ोल्डर टाइपिंग में।

• कुछ कंटेनर जो घटक droppable कंटेनर
• घटक है जो होगा अंदर गिरा दिया जाना कर सकते हैं:

  

  चरण 2

  खींचें और छोड़ें कार्यान्वयन के लिए दो पहलू है खींचने की अनुमति ड्रैगगेबल घटक

मेरे कार्यान्वयन में, बोर्ड स्क्वायर ड्रॉप करने योग्य है जहां टुकड़े गिराए जा सकते हैं और टुकड़े खींचने योग्य होते हैं जिन्हें दो वर्गों के बीच खींचा जा सकता है। इसका समर्थन करने के लिए मौजूदा वर्ग (एचटीएमएल टेम्पलेट) को सीएसएस क्लास droppable-square जोड़ें, जिसे बाद में स्क्वायर ड्रॉप करने योग्य बनाने के लिए उपयोग किया जाएगा। और शतरंज टुकड़ा खींचने योग्य बनाने के लिए सीएसएस वर्ग draggable-piece जोड़ें।

<div *ngFor="let files of Board.Files, let i = index"> 
    <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'"> 
    <span class="square-name">{{Board.Squares[7-i][j].SquareId}}</span> 
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div> 
    </div> 
</div> 

चरण 3

खींचने योग्य और droppable के कार्यान्वयन के लिए, जो तर्क टुकड़े चल बनाने के लिए है PieceMover नामित नया वर्ग बनाया। जैसा कि निम्नलिखित कोड बेस में दिखाया गया है, यह सीएसएस वर्गों को खींचने योग्य बनाता है & ड्रॉपपेबल, और स्क्वायर पर टुकड़े को छोड़ने के लिए केवल स्क्वायर पर छोड़ने की अनुमति देने पर प्रतिबंध प्रतिबंध। ड्रैग-ड्रॉप प्रक्रिया के दौरान बोर्डर को दिखाने के लिए कुछ अतिरिक्त तर्क हैं जिन पर टुकड़े होवर करते हैं।

निर्भरता इंजेक्शन - कोणीय 2

निर्भरता इंजेक्शन ऐसे सी # रूप में किसी भी अमीर सर्वर साइड विकास भाषाओं के रूप में कोणीय 2. की सबसे अधिक मूल्यवान सुविधा में से एक है, जावा आईओसी कंटेनर निर्भरता का समर्थन करने के लिए अनुमति देता है इंजेक्शन, इसी तरह कोणीय 2 डी की अनुमति देता है। निर्भरता इंजेक्शन कक्षाओं के बीच निर्भरता को कम करने और मॉड्यूलर विकास का समर्थन करने की अनुमति देता है। जैसा कि PieceMover वर्ग के ऊपर वर्ग कोड @Injectable() से सजाया गया है, जो कोणीय 2 के डी कंटेनर को इंगित करता है कि इस वर्ग को इंजेक्शन दिया जा सकता है। PieceMover कक्षा कोड की पहली पंक्ति में इंजेक्शन योग्य आयात के साथ-साथ नोटिस करें।

उपभोक्ता वर्ग जो BoardComponent है इस मामले में "प्रदाताओं" सरणी का उपयोग विशिष्ट निर्भरताओं के लिए करता है जिन्हें कोणीय 2 डी कंटेनर द्वारा हल किया जाना आवश्यक है। निर्माता PieceMover के पैरामीटर लेता है जिसे DI द्वारा इंजेक्शन/हल किया जाएगा। उपरोक्त वर्णित निर्भरताओं को हल करने के बाद, बोर्ड BoardComponent कॉल करने के बाद विधि MakePiecesMovable() विधि विधि, जो टुकड़े को शतरंज वर्गों पर ले जाती है।

युपीडी:

• ng2-draggable
• ng2-dragula