Angular 2 PrimeNG Scheduler onDrop事件获取日期(Angular 2 PrimeNG Scheduler onDrop event get date)

Angular 2 PrimeNG Scheduler onDrop事件获取日期(Angular 2 PrimeNG Scheduler onDrop event get date)

我正在尝试使用primeNG Scheduler实现拖放支持。

这是我的模板。

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

但在处理程序中，我的事件是DragEvent，而不是日期事件和日期以及其他所有事情。

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

有人认为pDroppable="test"会以某种方式打破它，因为我最初在没有它的情况下做到这一点对我而言看起来很自然。 但完全没有事件发生。

而另一个想法，因为primeng拖放使用本机DragAndDrop它不适用于Scheduler？ 导致完整日历支持Jquery-ui的拖放。 威尔现在检查一下。

可能是我错过了什么，这里有问题。

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

UPD：是的看起来像pDroppable覆盖onDrop并使用自己的参数调用它。

确认它只适用于jquery-UI draggable。

I am trying to implement drag and drop support with primeNG Scheduler.

Here is my template.

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

But in handler my event is DragEvent and not calendar event with date and all other things from it.

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

One thought is that pDroppable="test" breaks it somehow cause as i initially did it without it and it looked natural to me. But than no event happens at all.

And one another thought, cause primeng Drag&Drop uses native DragAndDrop it does not work with Scheduler? Cause full calendar supports drag and drop for Jquery-ui. Wil check this now.

May be i missed something, here is plunker with problem.

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

UPD: Yes looks like pDroppable overrides onDrop and calls it with own arguments.

Confirmed it works only with jquery-UI draggable.

最满意答案

我能找到的唯一解决方案就是解雇PrimeNG Drag＆Drop并使用支持的JQuery-UI ...

在你的组件中声明对这样的JQuery的引用（必须使用这种语法而不是像import $ from 'jquery';那样import $ from 'jquery';这个import $ from 'jquery';导入jQuery，因为它创建了一个不同的上下文来防止drop工作）：

declare var $: any;

然后在onInit方法上创建组件Draggable：

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

拖动源当然可以是具有所选选择器的任何html元素：

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

如果您在导入jquery-ui时遇到问题，我最终使用了jquery-ui-bundle并修改了angular-cli.json，如下所示：

"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" ],

我希望这有帮助...

The only solution I've been able to find is to dismiss the PrimeNG Drag & Drop and use the supported JQuery-UI one...

In your component declare a reference to JQuery like this (it's mandatory to use this syntax instead of importing jQuery like this import $ from 'jquery';, because it creates a different context that prevents the drop to work):

declare var $: any;

then on the onInit method make the component Draggable:

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

The drag source could be of course any html element with the chosen selector:

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

If you have problem importing jquery-ui, I've ended up using jquery-ui-bundle and modifying the angular-cli.json like this:

"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" ],

I hope this helps...