Items are missing on drop

[madanv]

Hello, I observed that the items are sometimes missing after drop into a different list from its parent. Could some one help me resolving it.

[madanv]

Attached a sample screenshot:

[madanv]

Hi, I have figured out that the problem for me is actually with the removeclass function in dragend event.

element.removeClass("dndDraggingSource");

The classname, dndDraggingSource is added to the element in dragstart event using by timeout. In my case when I try to drag an element and drop it on the screen in a quick flash, dragend event is working fine but the dndDraggingSource class is being added after dragend event because of timeout.

I was able to fix this by updating the dragend event to remove the class, dndDraggingSource by using timeout as below.

$timeout(function () { element.removeClass("dndDraggingSource"); }, 0);

If this makes sense could this be fixed in the module as well.

[yohanyflores]

I really the same thing happened, especially in chrome. This happens because sometimes the "dragend" event is sent without triggers the "drop" event, and also set event.dataTransfer.dropEffect to a value other than 'none'.

This causes the element to be lost, because it is removed without first copying.

[madanv]

@yohanyflores any suggestion for fixing it?

[yohanyflores]

I always use the fallback, dndDropEffectWorkaround.dropEffect.

In "dragend"

dropEffect = dndDropEffectWorkaround.dropEffect; 

In "drop"

          // In Chrome on Windows the dropEffect will always be none...
          // We have to determine the actual effect manually from the allowed effects
          if (event.dataTransfer.dropEffect === "none") {
            dndDropEffectWorkaround.dropEffect = event.dataTransfer.effectAllowed === "copyMove"
              ? (event.ctrlKey ? "copy" : "move")
              :  event.dataTransfer.effectAllowed;
          } else {
            dndDropEffectWorkaround.dropEffect = event.dataTransfer.dropEffect;
          }

[madanv]

@yohanyflores thanks for the help.

[marceljuenemann]

Thanks a lot for the great work! I've also seen the problem sometimes, but I wasn't able to reproduce it reliably. When I find a few hours, I'll review this and release a new version (takes a while since I want to test each release on all major operating systems and browsers)

[manindr]

Hi,
I'm sorry for bothering you guys but i'm also facing this issue even with the latest code. Do i need to do something by myself to fix this issue or library take cares of it by itself now?

  <ul dnd-list
      dnd-drop="dropPageCallback(index,callback)"
      dnd-allowed-types="['page']">
    <li ng-repeat="page in canvas.pages track by page.id"
        dnd-draggable="null"
        dnd-callback="$index"
        dnd-effect-allowed="move"
        dnd-type="'page'">
      <div>
        <button draggable="true"
                title="{{page.title}}"
                ng-click="selectPageAndSection(page)"
                ng-bind="page.title"></button>
      </div>

      <!-- the list of sections for each page -->
      <ul 
          dnd-list
          dnd-drop="dropSectionCallback(index,callback)"
          dnd-allowed-types="['section']">
        <li ng-repeat="section in page.sections track by section.id"
            dnd-draggable="null"
            dnd-callback="$index"
            dnd-effect-allowed="move"
            dnd-type="'section'">
          <div>
            <button draggable="true"
                    data-tid="page-list-section-menu-item-{{section.id}}"
                    title="{{section.title}}"
                    ng-click="selectPageAndSection(page, section)"
                    ng-bind="section.title></button>
          </div>
        </li>
      </ul>
    </li>
  </ul>

JS code

  public dropPageCallback(toIndex: number, callback: Function): boolean{
          const fromIndex = callback();
          //move page
        return true;
  }

   public dropSectionCallback(toIndex: number, callback: Function): boolean{
             const fromIndex = callback();
            //move section 
           return true;
    }

Any help would be really appreciated. Thanks.