Can't limit the max number of elements in containers with models

[sjeannin]

Hi there!

So I've read through the docs and I can't find a way to set the max number of elements in all containers, especially when the containers are injected via a directive and depend on different scopes.

My problem is: when dropping an element where the container is supposedly full, sometimes it will be accepted and sometimes rejected, although it should always be rejected.

I use a service to initialize all containers independently and they do share the same type of models and behavior :

• The "notes" are stuck to "anchors"
• An anchor should accept 0 or 1 note.

Therefore, my anchors/notes have the following structure in my factory:

/* factory = */
{
  "anchors": {
    "test-1": [],
    "test-2": [{ "id": "id-42", "etc": "..."}]
  }
}

This is how I initialize my service for all my containers during the directive link:

      /* anchor = 'test-2' */
      dragularService([document.querySelector('#' + anchor)], {
        containersModel: [factory.anchors[anchor]],
        scope: $rootScope,
        moves: function (el, container, handle) {
          return handle.className === 'handle';
        },
        canBeAccepted: function (el, target) {
          return angular.element(target).children().length < 1;
        },
        accepts: function (el, target) {
          return angular.element(target).children().length < 1;
        }
      })

The dragularService is the same for all containers, since it's used only once in the service that also handles the factory.

• Is there something I'm doing wrong?
• Is there a simpler way to achieve this?
• Do you need more details?

Thanks! ~SJ

[luckylooke]

At first glance your code looks good to me, should be working.

You dont need to specify both accepts and canBeAcceped in your scenario. Difference between them is that accepts is executed when item is being dropped in my container and canBeAccepted is executed when item from my container is dropped somewhere else. So accepts is suitable for filtering whan can be dropped in my container and canBeAccepted is suitable for filtering where items from my container can be dropped.

Please be so kind and save my time by reproducing your scenario somewhere I can examine the code..for example you can fork this codepen as start point. Thanks

[sjeannin]

Here's the updated codepen

You will be able to check that you can drag element from "test-1" to "test-3" even if there is already an element in test-3.

Thank you so much for investigating :)

[luckylooke]

Ok it seems to be bug :/ I will fix it soon..

[luckylooke]

I have found the bug, so the fix will be soon released ;)

[sjeannin]

You rock! Thank you for your time :)

[luckylooke]

Just released v4.4.6 including the fix. I have made some minor edits to your code here. Thank you for your cooperation! Happy coding! :)

[sjeannin]

Thanks a lot and have a great weekend :)