ng-grid - перетаскивание заголовка столбца с изображением заставляет Firefox перенаправить в исходное местоположение изображения

Question

Я собрал быстрый поршень, который демонстрирует проблему.

Пожалуйста, откройте это в Firefox и перетащите столбец утки на другой столбец, чтобы изменить их порядок.

http://plnkr.co/edit/dO2uhMKDXQtFbNMkSieR?p=preview

Это происходит все время в Firefox, но не в Chrome или IE.

Я могу заставить это произойти в Chrome, если я добавлю точки останова в файл ng-grid.js для перетаскиваемой функциональности. Я ничего не манипулирую, я просто перебираю код, и это происходит так, как в Firefox. Я предполагаю, что это означает, что это проблема синхронизации, поскольку отладка изменяет время выполнения.

Answer 1

Я до сих пор понятия не имею, почему проблема возникает в Firefox, когда у вас есть IMG в заголовке....

НО...

Вместо этого я попытался установить фоновое изображение на DIV, и это, похоже, решило проблему.

http://plnkr.co/edit/Y1qF59YExcN1yCDYWlvT?p=preview

.image_duck {background-image: url ( http://png-5.findicons.com/files/icons/1799/bathroom/48/duck.png); повторение фона: без повтора; высота: 100 пикселей; ширина: 25 пикселей; дисплей: блок; }

Answer 2

Полностью изменился мой последний ответ. Не знаю, что я тестировал вчера, но, видимо, я не работал. Итак, вот моя следующая попытка:

Используйте эту директиву

app.directive('linkPrevent', function() {
  return {
    link: function(scope, element, attrs) {
      setTimeout(function() {
        element.unbind('drop');
        element.bind('drop', function(e) {
          if (e.preventDefault) {
            e.preventDefault();
          }
          if (e.stopPropogation) {
            e.stopPropogation();
          }
        })
      })
    }
  }
});

И эти шаблоны Headercell

  var myHeaderCellTemplate = '<div link-prevent class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">' +
    '<div link-prevent ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class=""><img  ng-src="http://png-5.findicons.com/files/icons/1799/bathroom/48/duck.png" alt="{{col.displayName}}"></div>' +
    '<div link-prevent class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' +
    '<div link-prevent class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' +
    '<div link-prevent class="ngSortPriority">{{col.sortPriority}}</div>' +
    '</div>' +
    '<div   ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';

  var stdHeaderCellTemplate = '<div link-prevent class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">' +
    '<div link-prevent  ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText" style="height:30px">{{col.displayName}}</div>' +
    '<div link-prevent class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' +
    '<div link-prevent class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' +
    '<div link-prevent  class="ngSortPriority">{{col.sortPriority}}</div>' +
    '</div>' +
    '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';

и эти columnDefs

columnDefs: [{
  field: 'name',
  headerCellTemplate: myHeaderCellTemplate
}, {
  field: 'age',
  headerCellTemplate: stdHeaderCellTemplate
}]

Теперь это работает в этом Plunker (Да, ленивый mainguy сделал тщательный тест на этот раз. Перетащил его везде)

Примечание. Это предотвратит использование по умолчанию для каждого события удаления.

Я назначил его повсеместно, чтобы убедиться, что не осталось элементов, которые хотя и очень малы (кнопка сортировки) и способны связываться с новой целью.

Имейте в виду, что размер ngHeaderText установлен на 30 пикселей, чтобы заполнить весь заголовок. Если высота не подходит, может быть небольшой промежуток, через который может проходить связывание по умолчанию (подлый bastich!)