Angular 2 PrimeNG Scheduler onDrop 事件获取日期

Question

我正在尝试使用 primeNG 调度程序实现拖放支持。

这是我的模板。

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

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

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

一个想法是 pDroppable="test" 以某种方式破坏了它，因为我最初没有它就这样做了，它对我来说看起来很自然。但总比什么事都没有发生。

还有一个想法，是因为 primeng Drag&Drop 使用本机 DragAndDrop，它不适用于 Scheduler？因为完整日历支持 Jquery-ui 的拖放。现在将检查这个。

可能是我遗漏了什么，这里有问题。

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

更新：是的，看起来 pDroppable 覆盖了 onDrop 并使用自己的参数调用它。

已确认它仅适用于 jquery-UI 可拖动。

Answer 1

我能找到的唯一解决方案是关闭 PrimeNG 拖放并使用受支持的 JQuery-UI 一个...

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

declare var $: any;

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

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

希望对您有所帮助...

Answer 2

一种在您的代码中使用 jQuery-UI 的解决方案，例如底部的 post。但我不想使用 jQuery-UI，希望 primeng 团队能解决这个问题，或者 fullcalendar 会支持原生拖放。

我的解决方案（我需要支持进入特定事件，所以将展示示例，但它也可以与 day 一起使用）

这里是 plunker - https://plnkr.co/edit/LddxzNDSyOwGlPhW1rRq?p=preview

这是解释。

所以我为事件渲染添加了处理程序

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

并像这样用在压延机上。

<p-schedule [events]="events" [droppable]="true" [options]="calendarOptions">

eventRender 有属性，但是fullcalender 自己调用它，所以自引用被破坏了。所以通过使用选项和包装函数我可以调用我的函数

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;
}

我认为这不是最好的，我想在此函数中使用 primeng droppable 呈现事件模板。但是现在没有太多时间去深入研究它。但是因为它完全在一个地方，如果 primeng 或 fullcalender 能修复它，我希望在大多数情况下我只需要删除它。也可以用于日视图。但是因为我的日下降逻辑要复杂得多，目前还没有实现。还有 dayRender 属性，所以它应该非常相似。

Angular 2 PrimeNG Scheduler onDrop 事件获取日期

Angular 2 PrimeNG Scheduler onDrop event get date

angular

primeng