OnBeforeDragEnd replace if position occupied, dont switch position

[HectorLS]

Hello, first of all congrats by this awesome library !! 👏 👏 works sweet.

Just found a problem using this OnBeforeDragEnd function. I am setting the current region with draggable elements as occupied. So if a new draggable elements try to be dropped there i check a condition and then:

Option 1) i replace the current element by the new one. Option 2) i prevent the element to be blocked (something like not allowed position);

  onBeforeDragEnd(e) {
    if(!!e.dragster) {
      let origin      = e.dragster.drag.node;
      let destination = e.dragster.drop.node;

      if(!!origin && !!origin.parentNode) {
        if(origin.parentNode.classList.contains('slot')) {
          origin.parentNode.classList.remove('occupied');
        }
      }

      if(!!destination) {
        let slotIsOccupied = destination.classList.contains('occupied');
        let slotIsNotAllowed = destination.classList.contains('not-allowed');
        if(slotIsOccupied && !slotIsNotAllowed) {
          // This removeChild is not working because you already added the element there 
          // the temp one, and that is awesome 
          // i just want to remove the element already there and then add this one
          // destination.removeChild(destination.firstChild);
        } else if (slotIsNotAllowed) {
           // Here prevent the element to be dropped
        } else {
          // If the slot is available i add the 'occupied' for the new element dropped
          destination.classList.add('occupied');
        }
      }
    }
  }

Because of my project needs i cannot have a region where you just add elements one above or below another. I need to have like fixed slots. So i implemented this way :

<ul class='column'>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
</ul>

I hope that you understand my question and be able to oriented me 🙏 Thanks in advance

[sunpietro]

@HectorLS I'll try to reproduce the issue you mentioned and I'll get back to you ASAP.

[sunpietro]

@HectorLS if I understood your problem, you're trying to detect whether an element can be dropped inside the onBeforeDragEnd callback function. Maybe you should do such detection in the onBeforeDragMove callback? This will prevent displaying drop placeholders. Remember to return a boolean value from your callbacks.

[HectorLS]

Oh! I thought OnBeforeDragMove was only before the first move. Ok, i gonna try and in case don't work gonna replicate the sample case in codePen.

Thanks in advance

[HectorLS]

Hello @sunpietro , i tried the onBeforeDragMove but this is not what i expected and also means a lot of function calls.

i replicated the sample case on codePen So i'm trying to:

Option 1) i replace the current element by the new one.

• Currently its just ignoring the case and dropping inside, i need a replace.

Option 2) i prevent the element to be blocked (something like not allowed position);

• Here is the case where i want to drop it in a region--drag but if the region has the class not-allowed, just block the dropping element here ( it would be the same behavior of the li with the single classname 'slot'.

[HectorLS]

Hello @sunpietro, have you been able to check the codePen? Thanks in advance

[sunpietro]

@HectorLS have you tried doing this:

if (slotIsOccupied && !slotIsNotAvailable) {
    // REPLACE ELEMENT
    return true;
} else if (!slotIsOccupied && slotIsNotAvailable) {
    // AVOID THE DROP ACTION
    return false;
} else {
    destination.classList.add('occupied');
    return true;
}

As I mentioned here: https://github.com/sunpietro/dragster/issues/42#issuecomment-369203959 The callback must return a boolean value. false value when script should prevent action and true or any other value if it should continue action.

[HectorLS]

Hello @sunpietro, thankyou replying me! i have tried the return false and wasn't working but now i know the reason, a start point finally😃

It's because;

the onBeforeDragEnd function runs twice instead of one 😕

so it's like overwriting itself...

I added a console.log so you can check it in the codePen. Any idea about this behaviour ? 🤔

Thanks in advance !

[sunpietro]

I'm not sure why. I'll try to find some time for debugging this issue. I haven't met that behaviour before.

[HectorLS]

Hi again, i have been checking your code but i haven't located the bug 😭 , have you been able to debugge this ?

Thanks!