Move event not firing in Firefox without forceFallback

[typeoneerror]

I've tried master and dev and sometimes, I cannot get Firefox to start dragging unless forceFallback is set to true. I'm using that now, but I think there's an issue with Firefox sometimes not initializing the drag start when draggable is set. When I click my handle, I'll see draggable=true and the classes are added, but nothing happens when you start dragging.

This was happening when my drag handle had another element over it. The click events work on the button but drag events never happen.

Think it might be related to http://stackoverflow.com/questions/13920345/html-drag-event-does-not-fire-in-firefox.

[typeoneerror]

Related: https://bugzilla.mozilla.org/show_bug.cgi?id=646823#c4

[BrainCrumbz]

Just faced this issue, at least with v1.5.0-rc1, not sure if also with previous versions. forceFallback: true solved it. In our scenario, we had items in a list, each one of them with button acting as the drag handle, next to other buttons as well.

BTW, this also fixed the same issue showing up in MS Edge too.

[RubaXa]

Please add an example, to I can reproduce the problem.

[BrainCrumbz]

Hi, no quick and ready example available at the moment, sorry. Not sure it may help, but here's an excerpt of the interested bits:

This is the generated HTML, produced out of an Angular SPA:

<div class="list-group">
  <div class="list-group-item header">
    <div class="row">
      <div class="col-md-2">
        dbColumnName
      </div>
      <div class="col-md-2">
        uiLabel
      </div>
      <div class="col-md-2">
        uiLocation
      </div>
      <div class="col-md-4">
        formatType
      </div>
      <div class="col-md-2">
        <span class="pull-right">
          actions
        </span>
      </div>
    </div>
  </div>

  <div [sortablejs] [sortablejsOptions]="dragOptions">

    <div class="list-group-item">
        <list-item>
          <div class="row">

            <div class="col-md-2">dbColumnName 1</div>

            <div class="col-md-2">uiLabel 1</div>

            <div class="col-md-2">uiLocation 1</div>

            <div class="col-md-4">
              <span class="glyphicon glyphicon-whatever"></span>
              <span class="format-sample text-muted">formatSample 1</span>
            </div>

            <div class="col-md-2">
              <span class="pull-right">
                
                <button type="button" class="btn btn-xs btn-default drag-handle">
                  <span class="glyphicon glyphicon-sort"></span>
                  <span class="sr-only">move</span>
                </button>
                
                <button type="button" class="btn btn-xs btn-primary">
                  <span class="glyphicon glyphicon-pencil"></span>
                  <span class="sr-only">edit</span>
                </button>
                
                <button type="button" class="btn btn-xs btn-warning">
                  <span class="glyphicon glyphicon-minus"></span>
                  <span class="sr-only">delete</span>
                </button>
                
              </span>
            </div>

          </div><!-- row -->
        </list-item>
    </div><!-- list-group-item -->

    <div class="list-group-item">
        <list-item>
          <div class="row">

            <div class="col-md-2">dbColumnName 2</div>

            <div class="col-md-2">uiLabel 2</div>

            <div class="col-md-2">uiLocation 2</div>

            <div class="col-md-4">
              <span class="glyphicon glyphicon-whatever"></span>
              <span class="format-sample text-muted">formatSample 2</span>
            </div>

            <div class="col-md-2">
              <span class="pull-right">
                
                <button type="button" class="btn btn-xs btn-default drag-handle">
                  <span class="glyphicon glyphicon-sort"></span>
                  <span class="sr-only">move</span>
                </button>
                
                <button type="button" class="btn btn-xs btn-primary">
                  <span class="glyphicon glyphicon-pencil"></span>
                  <span class="sr-only">edit</span>
                </button>
                
                <button type="button" class="btn btn-xs btn-warning">
                  <span class="glyphicon glyphicon-minus"></span>
                  <span class="sr-only">delete</span>
                </button>
                
              </span>
            </div>

          </div><!-- row -->
        </list-item>
    </div><!-- list-group-item -->

    <div class="list-group-item">
        <list-item>
          <div class="row">

            <div class="col-md-2">dbColumnName 3</div>

            <div class="col-md-2">uiLabel 3</div>

            <div class="col-md-2">uiLocation 3</div>

            <div class="col-md-4">
              <span class="glyphicon glyphicon-whatever"></span>
              <span class="format-sample text-muted">formatSample 3</span>
            </div>

            <div class="col-md-2">
              <span class="pull-right">
                
                <button type="button" class="btn btn-xs btn-default drag-handle">
                  <span class="glyphicon glyphicon-sort"></span>
                  <span class="sr-only">move</span>
                </button>
                
                <button type="button" class="btn btn-xs btn-primary">
                  <span class="glyphicon glyphicon-pencil"></span>
                  <span class="sr-only">edit</span>
                </button>
                
                <button type="button" class="btn btn-xs btn-warning">
                  <span class="glyphicon glyphicon-minus"></span>
                  <span class="sr-only">delete</span>
                </button>
                
              </span>
            </div>

          </div><!-- row -->
        </list-item>
    </div><!-- list-group-item -->

  </div>

</div><!-- list-group -->

From the same app, this is the value passed as options:

this.dragOptions = {
  onEnd: this.onListItemDragEnd.bind(this),
  handle: '.drag-handle',
  // ignore the HTML5 DnD behaviour and force the fallback to kick in
  // NOTE: without this, dragging does not start in Firefox and MS Edge
  forceFallback: true,
};

We're using a wrapper library around Sortable, angular-sortablejs, and already talked through the issue with author: the library apparently is just wrapping Sortable behaviour and making it available to Angular components.

Sorry for not being able to provide a complete working example.
HTH