Using angular-dragdrop instead of interactjs

Question

Using angular-dragdrop instead of interactjs

yasserht opened this issue 7 years ago · 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

Answer 1 · 2017-06-16T15:17:16.000Z

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

Answer 2 · 2017-06-16T15:24:23.000Z

It's already set to a correct value, I'll provide a plunker

Answer 3 · 2017-06-16T15:25:12.000Z

Please, do, it will help a lot.

Answer 4 · 2017-06-16T19:10:29.000Z

here is the plunker @burtek http://plnkr.co/edit/49YTdAhDeRhwkGownAL2?p=preview , thank you

Answer 5 · 2017-06-16T19:47:49.000Z

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.

Answer 6 · 2017-06-17T01:58:31.000Z

https://plnkr.co/edit/U1e78k79DH6pfWnx5ERH?p=preview here is an updated plunker @burtek

Answer 7 · 2017-06-17T11:12:11.000Z

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

Answer 8 · 2017-06-17T11:55:17.000Z

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 ?

Answer 9 · 2017-06-17T12:24:37.000Z

Interact has no dependency on jquery, it's fully standalone (which was why I picked it)

Answer 10 · 2017-06-17T12:30:53.000Z

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

Answer 11 · 2017-06-17T12:52:50.000Z

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/#

Answer 12 · 2017-06-17T13:12:23.000Z

I'll try that, thank you, I just realized even when I install angular-bootstrap-calendar with bower, /src/directives file is empty

Answer 13 · 2017-06-17T15:22:15.000Z

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)

Answer 14 · 2017-06-17T21:46:21.000Z

So there is no way to use dragndrop or any other directive coz I can't modify the calendar right @mattlewis92 ?

Answer 15 · 2017-06-18T10:32:58.000Z

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

Answer 16 · 2017-06-20T13:58:04.000Z

@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" } }