Question

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

这是我的模板。

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

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

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

有一种想法是pDroppable="test"以某种方式打破了它，因为我最初没有它就这样做了，这看起来很自然。但是根本没有事件发生。

另一个想法，导致primeng Drag＆amp; Drop使用本机DragAndDrop它不能与Scheduler一起使用？导致完整日历支持Jquery-ui的拖放。威尔现在检查一下。

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

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

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

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

Answer 1

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

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

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

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

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

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

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

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

"de ad be ef 12 34 56 78"

我希望这会有所帮助......

Answer 2

在您的代码中使用jQuery-UI的一种解决方案，如底部的帖子。但我不想使用jQuery-UI，希望这将由primeng团队修复，或者fullcalendar将支持原生Drag＆amp; Drop。

我的解决方案（我需要支持放入特定事件，因此将显示示例，但它也可以在一天使用）

这是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事件获取日期

2 个答案: