Angular 2 PrimeNG Scheduler onDrop事件获取日期 [英] Angular 2 PrimeNG Scheduler onDrop event get date

问题描述

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

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

这是我的模板.

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

但是在处理程序中，我的事件是DragEvent，而不是带有日期和其他所有内容的日历事件.

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
}

一个想法是，pDroppable="test"会以某种方式破坏它，因为我最初没有它时就这样做了，这对我来说似乎很自然.但是，根本没有任何事件发生.

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.

又是另一种想法，是因为引发Drag&Drop使用本机DragAndDrop而不与Scheduler一起使用吗?因为完整日历支持Jquery-ui的拖放.威尔现在检查一下.

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: 是的，看起来pDroppable会覆盖onDrop并使用自己的参数进行调用.

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

确认它仅适用于可拖动的jquery-UI.

Confirmed it works only with jquery-UI draggable.

推荐答案

我唯一能找到的解决方案是消除PrimeNG Drag&拖放并使用支持的JQuery-UI一个...

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

在您的组件中声明这样的对JQuery的引用(强制使用这种语法而不是像这样的import $ from 'jquery';那样导入jQuery，因为它创建了一个不同的上下文来阻止拖放工作):

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;

然后在onInit方法上使组件可拖动:

then on the onInit method make the component Draggable:

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

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

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>

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

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...

这篇关于Angular 2 PrimeNG Scheduler onDrop事件获取日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！