dynamic droptargets, how?

Question

dynamic droptargets, how?

Closed this issue 10 years ago · 16 comments

Hi, awesome angular module you've made. However, i'm struggling to see how i can use it together with ng-repeated dropzones. I have included an image so my case is clear:
http://d.pr/i/FB6V (any item in a 'periode' should be able to be dragged over to another 'periode'. The thing is, the 'periodes' are generated from ng-repeats. i cannot determine what the droptarget is because i need to dynamically retrieve the droptarget and i don't know how to pass this information to the onDrop function (since it cannot accept parameters...)

Could you help me with this? 👍

Answer 1 · 2014-02-08T09:44:45.000Z

Will help you, could you pass me some html that you use and how yours is built up?

Answer 2 · 2014-02-08T09:45:08.000Z

Like a fiddler or somthing and I can just copy paste :)

Answer 3 · 2014-02-08T10:18:22.000Z

this one should've solved it
cef163f

Check out the new example page. Basically you now have an attribute called ng-model on drop.

Answer 4 · 2014-02-10T11:34:33.000Z

Hey man thanks for the quick response. i'll see if i can write a quick fiddle but first i'll check the new example page, thanks!

Answer 5 · 2014-02-10T16:30:17.000Z

hmm. I think you understand my problem but that i still don't know how to apply it :) the thing is, i also have > 1 years, so first i iterate over years then periods then courses.
I made a quick fiddle (it does not look like the screenshot but it's the same code, although i have my classes in the main app module and inject them but i needed to have them working for the fiddle.)

http://jsfiddle.net/michahell/rsjrc/

How can i make it so that i can drag and drop courses from different periods? from / to multiple years?

I also have a '$scope.moveToPeriod' drop function but i do not know what list is supposed to be (the periods or a single period which is the drop target)?

Thanks if you can take the time to look at it :)

[edit: argh i F-ed up the fiddle, moment... :<]

Answer 6 · 2014-02-10T16:34:53.000Z

haha, was just about to write about the fiddle :P

Answer 7 · 2014-02-10T16:42:02.000Z

updated! i added another year to illustrate what i mean :)
Also, the project i'm working on (to learn angular...) is located here: https://github.com/michahell/vuva-masterplanner. Generated an angular project with Yeoman and only added your drag-n-drop module with bower. should run out of the box, right (grunt serve).

Answer 8 · 2014-02-10T17:42:59.000Z

Took your code and tweaked it some
https://github.com/fisshy/angular-drag-drop/blob/master/example/periods.html

One problem was you wrote
!list.indexOf(course) which will not equal true but will be false correct way would be
!~list.indexOf(course) which will be same as list.indexOf(course) === -1

And I changed

 <div class="col-md-2 periodContainer" ng-repeat="period in year.periods" drop="moveToPeriod" ng-model="year.periods">

to

 <div class="col-md-2 periodContainer" ng-repeat="period in year.periods" drop="moveToPeriod" ng-model="period.courses">

ng-model is changed

Answer 9 · 2014-02-10T19:14:47.000Z

Ah, thanks for your help! Will check if i can get the same working here :)

Answer 10 · 2014-02-10T19:42:16.000Z

No problem. Let me know if it works so I can close this issue :)

Answer 11 · 2014-02-10T19:48:08.000Z

hmm. wth :D i downloaded the example, ran it locally, works like a charm. exactly like i want it!
However cannot get it to work with mine. Still searching what the issue is, haha. Javascript is telling me:
"TypeError: Object [object Object] has no method 'indexOf'" so it has to do with the last part, adding the course item to a $scope list :/

Also i changed the following because jshint is nagging about the tilde for some reason:

if(list.indexOf(course) === -1){
  list.push(course);
}

Answer 12 · 2014-02-10T20:14:05.000Z

hmm somehow the contents of the angular-dnd.js file of your last commit and the version i have differ. i think my bower update command doesn't work somehow... i think that has to do with it.

Answer 13 · 2014-02-10T20:15:02.000Z

Yep that was it :) thanks again! closed :) btw, grunt bower-install installs by default the minified version. so i manually copied over the latest changes, now to figure out why bower update does not work :/

Answer 14 · 2014-02-10T21:21:20.000Z

Try now, I forgot to Grunt it before i pushed it :)

Answer 15 · 2014-02-11T20:54:01.000Z

Btw i'm done with the first version of my app. you can use it as a demo if you wish -> https://github.com/michahell/vuva-masterplanner and online running at:
www.powergeek.nl/proj/masterplanner. It's a very simple first angular app though! thanks again for the quick help.

Answer 16 · 2014-02-12T05:55:16.000Z

Nice man, looking good =). Always happy to help!