Using angular-dragdrop instead of interactjs
yasserht opened this issue · 16 comments
Hello @mattlewis92 @burtek , is there a way to use angular-dragdrop instead of interactjs to drag external events into the calendar ? I can drag events now but when I drop them I get this error : angular.js:14525 TypeError: Cannot read property 'startsAt' of undefined. Thank you
Your events must have startsAt
field set to correct value prior to drag-and-drop action. Without this you;d get same error with angular-dragdrop
It's already set to a correct value, I'll provide a plunker
Please, do, it will help a lot.
here is the plunker @burtek http://plnkr.co/edit/49YTdAhDeRhwkGownAL2?p=preview , thank you
You have multiple errors in your code. I.e. in line 30 of example.js
:
var men = vm.men.indexOf(event);
There is no vm.men
in this controller. There is also no such object as event
. Please, correct all mistakes first, in particular the mess with using both vm = this
and $scope
.
https://plnkr.co/edit/U1e78k79DH6pfWnx5ERH?p=preview here is an updated plunker @burtek
Thanks for correcting that.
Answer: The problem with ngDragDrop
is that it uses JSON to send data and so all Date()
objects get simplified to ISO string (which is not accepted by this calendar). You may need to modify the data somewhere (I don't know where, as I'm not familiar with ngDragDrop
).
NB: Is there any particular reason you want to use ngDragDrop
instead of interactJS
? The latter is confirmed to work without problems with this calendar.
Also watch out for your Markup - in your code you have two parameters which may collide during drag'n'drop actions:
ui-on-Drop="onDrop($event,$data,events)"
on-event-times-changed="vm.onDrop(calendarEvent, calendarNewEventStart, calendarNewEventEnd)"
try to avoid doing that (which again can be easily achieved by using interactJS
).
I won't be able to help you anymore as I'm not familiar with ngDragDrop
Thank you for your answer, the problem with interactJS is that it's using jquery and my app is fully angular, so that is causing problems, draggable: true, for example inside the controller.
function onDrop(e) { if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } if (e.stopPropagation) { e.stopPropagation(); // Necessary. Allows us to drop. } var data = e.dataTransfer.getData("Text"); data = angular.fromJson(data); var fn = $parse(attr.uiOnDrop); scope.$apply(function () { fn(scope, {$data: data, $event: e}); }); element.removeClass(dragEnterClass); }
this s the function used for drop. @burtek
In order to use drandrop do I need to change anything about the calendar as well ?
Interact has no dependency on jquery, it's fully standalone (which was why I picked it)
Hello @mattlewis92 , but isn't draggable: true or resizable: true a dom manupulation, and cannot be done in a controller. I have my app deployed now and interactjs isn't loading, no idea why, that's why i decided to use a directive for drag and drop
interact is used inside a directive though: https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/src/directives/mwlDraggable.js
If interact isn't loading in production make sure it's included before this calendar, otherwise it won't pick it up. You could try adding it via a cdn link before yours apps bundle: http://interactjs.io/docs/#
I'll try that, thank you, I just realized even when I install angular-bootstrap-calendar with bower, /src/directives file is empty
That's because only the dist files are available (all the src files are bundled into one file, otherwise you'd have trouble including them all the files in arc manually)
So there is no way to use dragndrop or any other directive coz I can't modify the calendar right @mattlewis92 ?
Nope the only option you have is the directive that's bundled. You could always fork this lib and use the other drag and drop library but I don't really see what benefit that would give you
@mattlewis92 @burtek I solved the problem by installing interact first
"angular-bootstrap-calendar" : { "dependencies" : { "interactjs": "interact#^1.2.8", "angular": ">=1.3.0", "moment": "^2.10.0", "bootstrap": "^3.3.4" } }