Angular 2 PrimeNG Scheduler onDrop-Ereignis erhalten Datum

Question

Ich versuche, Drag & Drop-Unterstützung mit PrineNG Scheduler zu implementieren.

Hier ist meine Vorlage.

<p-schedule [droppable]="true" (onDrop)="handleDropEvent($event)" pDroppable="test"> 

Aber in Handler mein Ereignisse Dragevent und nicht die Veranstaltung mit Datum und alle anderen Dingen von ihrem Kalender.

handleDropEvent(event: any) { 
    console.log(event); //prints DragEvent 
} 

Ein Gedanke ist, dass pDroppable="test" bricht es irgendwie verursachen, wie ich zunächst ohne es tat es und es sah mir natürlich. Aber dann passiert überhaupt kein Ereignis.

Und einander gedacht, Ursache primeng Drag & Drop verwendet natives DragAndDrop es funktioniert nicht mit Scheduler? Der vollständige Kalender unterstützt Drag & Drop für Jquery-ui. Wil überprüfe das jetzt.

Vielleicht verpasse ich etwas, hier ist Plummer mit Problem.

https://plnkr.co/edit/89y3KOdkU63O6vJpcJ41?p=preview

UPD: Ja sieht aus wie pDroppable onDrop überschreibt und nennt es mit eigenen Argumenten.

Bestätigt, es funktioniert nur mit jquery-UI ziehbar.

Answer 1

Die einzige Lösung, die ich in der Lage bin zu finden ist die PrimeNG Drag & Tropfen verwenden, unterstützt JQuery-UI ein ...

In Ihrer Komponente einen Verweis auf JQuery wie diese entlassen erklären (es ist obligatorisch diese Syntax zu verwenden, anstatt jQuery wie diese import $ from 'jquery'; zu importieren, weil es einen anderen Kontext erzeugt, der die Tropfen an der Arbeit verhindert):

declare var $: any; 

dann auf dem onInit Verfahren macht die Komponente Ziehbare:

ngAfterViewInit(){ 
     $('.draggable').draggable({ 
      revert: "invalid", 
      revertDuration:1 
     }); 
    } 

Die Drag-Quelle natürlich jedes HTML-Element mit dem gewählten Wähler sein könnte:

<div class="draggable" style="background-color: gray;width:300px;height:30px">Drag me</div> 

Wenn Sie Problem beim Importieren jquery-ui, ich habe jquery-ui-Bündel am Ende mit und Modifizieren den Winkels -cli.json wie folgt aus:

"scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/jquery-ui-bundle/jquery-ui.min.js", 
     "../node_modules/moment/min/moment.min.js", 
     "../node_modules/fullcalendar/dist/fullcalendar.min.js" 
     ], 

ich hoffe, das hilft ...

Answer 2

Eine Lösung wie am unteren Rand in der Post jQuery-UI in Ihrem Code zu verwenden. Aber ich möchte nicht jQuery-UI verwenden und hoffe, dass dies von Primeng Team oder Fullcalendar wird behoben werden, wird native Drag & Drop unterstützen.

Meine Lösung (ich brauche Tropfen in bestimmtes Ereignis zu unterstützen, wird so zeigen beispielsweise mit, aber es kann auch mit Tag verwendet werden)

Hier ist Plunker - https://plnkr.co/edit/LddxzNDSyOwGlPhW1rRq?p=preview

Und hier ist Erklärung .

So hinzugefügt i-Handler für das Ereignis

machen

calendarOptions = { 
    eventRender: this.handleEventRender() 
}; 

und benutzte es, wie dies in Kalander.

Es gibt Attribut für eventRender, aber fullcalender ruft es selbst auf, also ist Selbstbezug gebrochen. Also mit Einsatz von Optionen und wickelte Funktion i meine Funktion

handleEventRender() { 
    let that = this; 

    let callback = (event: any, element: any, view: any) => { 
    if (event.type == this.DROP_EVENT) { 
     element.on('dragover', (jsEvent: any) => { 
      jsEvent.preventDefault(); 
      jsEvent.originalEvent.dataTransfer.dropEffect = 'copy'; 
     }); 

     element.on('drop', (jsEvent: any) => that.handleDropEvent(event)); 
    } 

    return element; 
    }; 

    return callback; 
} 

nennen kann, ist es nicht am besten meiner Meinung nach, würde Sie mag in dieser Funktion mit primeng abwerfbaren Vorlage für Ereignis machen. Aber für jetzt haben Sie nicht viel Zeit, sich damit zu beschäftigen. Aber weil es vollständig an einem Ort ist und wenn Primeng oder Fullcalender es beheben werden, hoffe ich, dass ich es in den meisten Fällen nur entfernen muss. Es ist auch möglich, für Tagesansichten zu verwenden. Aber weil meine Logik für den Tagesablauf viel komplexer ist, implementiere ich das momentan nicht. Es gibt auch ein DayRender-Attribut, also sollte es ziemlich ähnlich sein.