我正在尝试使用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...
更多推荐
pDroppable,Scheduler,event,test,onDrop,电脑培训,计算机培训,IT培训"/> <meta n
发布评论