Ngx-drag-scroll: प्रश्न: एनजी-बूटस्ट्रैप के टैबसेट के साथ इसका उपयोग कैसे करें?

हाय @tommykamkcm , मैं मदद के लिए जो कुछ भी कर सकता हूं वह करना अच्छा लगेगा, क्या आप अपना कुछ कोड प्रदान कर सकते हैं?

आपके तुरन्त जवाब का शुक्रिया! सबसे पहले, मुझे केवल Angular1 पर कुछ अनुभव है और मैं Angular2 के लिए नौसिखिया हूं। तो मुझे यकीन नहीं है कि मैं जो करने की कोशिश कर रहा हूं वह संभव है या नहीं:

तो नीचे एनजी-बूटस्ट्रैप के टैबसेट घटक को उत्पन्न करने के लिए HTML कोड है: https://ng-bootstrap.github.io/#/components/tabs

<ngb-tabset>
    <ngb-tab *ngFor="let group of groups" [id]="group.id">
        <template ngbTabTitle>{{group.name}}</template>
        <template ngbTabContent>
            ...
        </template>
    </ngb-tab>
</ngb-tabset>

और अंत में यह बन जाता है

<ngb-tabset _ngcontent-43="">
   <div class="longTabMenu">
    <ul role="tablist" ng-reflect-class-name="nav nav-tabs justify-content-start" class="nav nav-tabs justify-content-start">
        <li class="nav-item">
            <a href="" role="tab" ng-reflect-ng-style="[object Object]" ng-reflect-id="Themes" id="Themes" ng-reflect-class-name="nav-link nav-link-Themes" class="nav-link nav-link-Themes active" aria-controls="Themes-panel" aria-expanded="true" style="border-color: blanchedalmond;">
                Tab 1
            </a>
        </li>
        ...
        </ul>
    </div> 
    <div class="tab-content">
      ...
    </div>
  </ngb-tabset>

तो मैंने ng-bootstrap.js में drag-scroll को <div class="longTabMenu"> में जोड़ने का प्रयास किया है।

और जैसा कि अपेक्षित था, यह शायद काम नहीं करता क्योंकि <div class="longTabMenu" drag-scroll ...> प्रदान नहीं किया जाता है।

चूंकि पहली कोशिश काम नहीं कर रही है, अब मैं सोच रहा हूं कि क्या हम ड्रैगस्क्रॉल घटक को होस्ट घटक के ngOnInit / ngAfterViewInit में इंजेक्ट कर सकते हैं ताकि मैं मैन्युअल रूप से ड्रैगस्क्रॉल को <div ... > पर प्रारंभ कर सकूं
जैसे

@Component({
    selector: 'wd-shows',
    templateUrl: 'app/shows/shows.component.html',
    styleUrls: ['app/shows/shows.component.css'],
    providers: [ShowService, JobService],
})

export class ShowsComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit(): void {
        console.log('AfterViewInit');
        console.log(this.elTablistHolder);
        this.elTablistHolder = this.element.nativeElement.querySelector('.longTabMenu');
        this.renderer.setElementAttribute(this.elTablistHolder, 'drag-scroll', null);
        this.renderer.setElementAttribute(this.elTablistHolder, 'drag-scroll-y-disabled', 'true');
        this.renderer.setElementAttribute(this.elTablistHolder, 'scrollbar-hidden', 'true');
        **// Not sure what's next, still googling**
    }
...
}

मुझे अभी तक इतनी ही जानकारी मिली है। आपका समय देने के लिए आपका बहुत बहुत धन्यवाद!

हैलो @bfwg , अंत में यह काम कर गया! मूल रूप से, मुझे मैन्युअल रूप से करने की आवश्यकता है

• API में उपलब्ध attrs को परिभाषित करें
• कॉल ngOnChanges ()
• renderer.listen () और renderer.listenGlobal () का उपयोग करके सभी माउस ईवेंट को बाइंड करें

export class BlahComponent implements OnInit {
...
dragScrollDom: any;
dragScrollRef: ElementRef;
dragScroll: DragScroll;

constructor(...) {}
ngOnInit(): void {
...
        // At the end of the ngOnInit()
        this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
        this.dragScrollRef = new ElementRef(this.dragScrollDom );
        this.dragScroll = new DragScroll(this.dragScrollRef, this.renderer);
        this.dragScroll.disabled = false;
        this.dragScroll.scrollbarHidden = true;
        this.dragScroll.yDisabled = true;
        this.dragScroll.xDisabled = false;
        this.dragScroll.ngOnChanges();
        this.renderer.listen(this.dragScrollDo , 'mousedown', (event) => {
            this.dragScroll.onMouseDown(event);
        });
        this.renderer.listenGlobal('document', 'mousemove', (event) => {
            this.dragScroll.onMouseMove(event);
        });
        this.renderer.listenGlobal('document', 'mouseup', (event) => {
            this.dragScroll.onMouseUp(event);
        });
}
...
}

मेरे पास एक छोटा सा सुझाव भी है (हालांकि मुझे यकीन नहीं है कि यह एक अच्छा विचार है या नहीं): document.addEventListener() और document.removeEventListener() के बजाय Angular2 के renderer.listen() और renderer.listenGlobal() का उपयोग करें document.removeEventListener()
यह परिवर्तन करने से, स्रोत कोड संभवतः शुद्ध Angular2 में लिखा जाएगा, वेनिला JS के साथ मिश्रित नहीं होगा

अंत में, आपके प्रयास की सराहना करते हैं और उम्मीद है कि मेरे निष्कर्ष/सुझाव उपयोगी होंगे!

@tommykamkcm इसकी रिपोर्ट करने के लिए धन्यवाद, मैंने renderer.listenGlobal() का उपयोग करने के लिए पुस्तकालय को अद्यतन किया है। अगर आपको कुछ और नजर आए तो मुझे बताएं।

हैलो @bfwg , परेशान होने के लिए खेद है, लेकिन मैंने अभी पाया है कि मैंने कल जो किया है वह वास्तव में अन्य घटकों को प्रभावित कर रहा है जैसे .

मैं जो करने का सुझाव देता हूं वह है: कंस्ट्रक्टर में document के बजाय mouseup mousemove पर el.nativeElement $ पर बांधें

this.mouseMoveListener = renderer.listen(el.nativeElement, 'mousemove', this.onMouseMoveHandler);
this.mouseUpListener = renderer.listen(el.nativeElement, 'mouseup', this.onMouseUpHandler);

ऐसा करने के बाद, इनिशियलाइज़ेशन के लिए केवल 2 चरणों की आवश्यकता होती है:

• API में उपलब्ध attrs को परिभाषित करें
• कॉल ngOnChanges ()
• ~ renderer.listen() और renderer.listenGlobal()~ . का उपयोग करके सभी माउस ईवेंट को बाइंड करें

कंस्ट्रक्टर (...) {}
ngOnInit (): शून्य {
...
// ngOnInit के अंत में ()
this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
this.dragScrollRef = नया ElementRef (this.dragScrollDom);
this.dragScroll = नया ड्रैगस्क्रॉल (this.dragScrollRef, this.renderer);
this.dragScroll.disabled = असत्य;
this.dragScroll.scrollbarHidden = true;
this.dragScroll.yDisabled = true;
this.dragScroll.xDisabled = false;
this.dragScroll.ngOnChanges ();
this.renderer.listen(this.dragScrollDo , 'mousedown', (event) => {
this.dragScroll.onMouseDown (ईवेंट);
});
~this.renderer.listenGlobal('document', 'mousemove', (event) => {
this.dragScroll.onMouseMove (ईवेंट);
});
this.renderer.listenGlobal ('दस्तावेज़', 'माउसअप', (घटना) => {
this.dragScroll.onMouseUp (ईवेंट);
});~
}

अंत में, यह वास्तव में अच्छा होगा यदि आप स्रोत कोड संकलित कर सकते हैं और इसे npm install के लिए उपलब्ध करा सकते हैं। आपका बहुत बहुत धन्यवाद!

ओह, अब समझा तुम्हारा क्या मतलब है। मैं आज कुछ समय स्रोत को अपडेट करूंगा और एनपीएम पर अपलोड करूंगा, इसकी रिपोर्ट करने के लिए फिर से धन्यवाद।

अरे @tommykamkcm , मुझे अभी एहसास हुआ है कि mouseup और mousemove को दस्तावेज़ पर होना चाहिए, अन्यथा यदि आप माउस को दबाते हैं और घटक के बाहर खींचते हैं तो सामग्री चलना बंद हो जाएगी।
कोई विचार? यदि आप चाहें तो आप एक पुल अनुरोध कर सकते हैं और मैं इसे मर्ज कर सकता हूं।

हैलो @bfwg , शायद एक कदम पीछे हटें और विभिन्न उपयोग के मामलों के बारे में सोचें।

मेरा उपयोग मामला माउस या उंगली से लंबे क्षैतिज मेनू को ड्रैग-स्क्रॉल करने योग्य बनाना है। सब कुछ ठीक चल रहा था जब तक कि मैं एक HTML5 स्लाइडर पर घसीटा नहीं गया, जो कि mousemove संवेदनशील है। मैं क्लिक और ड्रैग कर सकता था, लेकिन सही स्थिति में पहुंचने के बाद हैंडल को रिलीज़ नहीं कर सकता था।

तो मेरे लिए मैं क्या उम्मीद कर रहे हैं a) उपयोगकर्ता। हमेशा ड्रैग ज़ोन यानी मेनू के अंदर खींचें b) पेज पर अन्य घटकों को प्लगइन से प्रभावित नहीं होना चाहिए।

और आपके उपयोग का मामला शायद तब तक है जब तक उपयोगकर्ता माउस को पकड़कर ले जाते हैं, वे सामग्री के एक निश्चित हिस्से को आसानी से खींचने और देखने में सक्षम होना चाहिए (ड्रैग ज़ोन = document )

मुझे यकीन है कि अधिक से अधिक उपयोग के मामले होंगे और मुझे लगता है कि ड्रैग जोन को विन्यास योग्य बनाना [स्वयं | डिफ़ॉल्ट: दस्तावेज़ ] शायद जाने का रास्ता होगा।

हाय @tommykamkcm , मुझे लगता है कि हम निश्चित रूप से इसे ठीक कर सकते हैं। मैं एनजी-बूटस्ट्रैप के टैबसेट के साथ परीक्षण करने जा रहा हूं और देख सकता हूं कि मैं पुन: पेश कर सकता हूं या नहीं।
मेरे साथ धैर्य रखने के लिए फिर से धन्यवाद .

हाय @tommykamkcm , मैंने डेमो ऐप html टेम्प्लेट में नीचे दिया गया कोड डाला है।

    <ngb-tabset>
      <ngb-tab title="Simple">
        <ng-template ngbTabContent>
          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
        <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
          <div class="demo-one" drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
            <img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
          </div>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>

ड्रैग लिस्ट ने उम्मीद के मुताबिक काम किया। क्या आप कृपया अपने एचटीएमएल कोड के बारे में अधिक जानकारी प्रदान कर सकते हैं?

नमस्ते @bfwg लंबी चुप्पी के लिए खेद है।

मैं जो करने की कोशिश कर रहा हूं वह वास्तव में प्लगइन को <ngb-tab> पर लागू करता है, जिसे बाद में <ul role="tablist" ... > से बदल दिया जाएगा

कोई चिंता नहीं @tommykamkcm , मैं देख रहा हूं, आप घटक के प्रस्तुत होने के बाद निर्देश को जोड़ने की कोशिश कर रहे हैं। मुझे कल कोशिश करने दो और मैं जितनी जल्दी हो सके आपके पास वापस आऊंगा।

@tommykamkcm देरी से प्रतिक्रिया के लिए क्षमा करें। मैंने ng-tab के साथ थोड़ा सा खेला है और मैं इसे कुछ हैक का उपयोग किए बिना काम नहीं कर सकता, जैसे आपके पिछले कार्यान्वयन में।

कोई चिंता नहीं @bfwg , जब तक कोई हैक है तब तक सभी को आराम करना चाहिए और यह काम करता है।

यह भी अच्छा होगा यदि हमारे पास एक ऐसी विधि हो जो हैक करे, दूसरे शब्दों में, प्लगइन को गतिशील रूप से DOM तत्व पर लागू करें!

वैसे भी, आपके समर्थन के लिए फिर से धन्यवाद! वास्तव में इसकी तारीफ है!

अरे @tommykamkcm , मैं प्लगइन में attach() विधि पर काम कर रहा हूं जो आप चाहते हैं:

"एक डोम तत्व के लिए प्लगइन को गतिशील रूप से लागू करें"

यह लगभग पूरा हो चुका है, क्या आप पुल अनुरोध के तैयार होने के बाद उसकी समीक्षा करना चाहेंगे?
भारी देरी के लिए खेद है। मैं

हैलो @bfwg कोई चिंता नहीं, मैं वास्तव में आपकी मदद की सराहना करता हूं! बस अपना कोड पढ़ें और सब कुछ अच्छा लग रहा है! एक बार फिर धन्यवाद!

नमस्ते @tommykamkcm / @bfwg क्या आप कृपया स्क्रॉल के साथ एनजीबी-टैब के लिए डेमो छोड़ सकते हैं

धन्यवाद