Drag on hold

[elrafael]

REQUIRED: Before filing a usage question

Change each [ ] to [x] when you have done it.

• [x] My issue title starts with [usage question]
• [x] I have read the README, especially the 'classic blunders' section
• [x] I have looked at the demos to see if my use case has obvious examples.
• [x] I have searched the ng2-dragula issues, including closed issues.
• [x] I have browsed the issues labeled "future reference" for problems that have been solved before.

Use case description (required)

Starts the drag only when I hold an item. I have a list of icons (similar to the launcher of Android or home screen of iOS) and I want to drap and drog only when the user hold an icon. I can bind the hold event but didn't figure out how to start the drag n drop only when I hold.

Can you show a demo, or a picture of what you want to achieve?

The html

  <div id="draggableDragula" class="items1" (press)="hold($event)" dragula="DRAGULA_FACTS">
    <div class="app" *ngFor="let item of items1">
      <div class="iconDiv {{item.class}}" (tap)="openApp(item.href)">
        <ion-icon name="{{ item.icon }}"></ion-icon>
      </div>
      <p class="descIcon" (tap)="openApp(item.href)">{{ item.text }}</p>
      <div class="edicao" style="display: none;">
        <a href="#" (tap)="removeApp(item)"><ion-icon name="trash"></ion-icon><br>Remover do Menu</a>
        <div class="arrowDown"></div>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>

The JS

  hold(item) {
    console.log('touch hold!');
    console.log(item);
    // this.dragulaService.createGroup('DRAGULA_FACTS', {});
    // this.dragulaService.drag('DRAGULA_FACTS');

    this.openEdicaoIcones(item);
  }

Additional context

Add any other context here.

[cormacrelf]

It's not built for dragula 2.0+, so just imagine the code has been updated, but you could try:

https://github.com/cormacrelf/dragula-touch-demo -- and the DelayDragDirective.

Also, given that you have complex requirements, you might consider using @angular-skyhook instead. The example app uses the touch backend configured with a constant pre-delay just like DelayDragDirective. (You could really control it by having canDrag depend on some value set by a timer like DelayDragDirective, but I'll leave that as an exercise.)

For more complicated hovers and delays, see the 'hover to drilldown' for an example of delayed mid-flight hovering/activation using RxJS. Like iPhone home screen folders. @angular-skyhook/sortable in horizontal mode with extra activatorDropTargets on each icon to get a home screen effect. The animation code will be the hard part, because animating list operations in angular is really difficult.