Разрешить доступ к данным перетаскиваемых элементов в обработчике событий dragenter в Chrome

Question

Я работаю над компонентом сетки для приложения Angular 6, где каждая ячейка содержит список объектов, которые пользователь может перетаскивать в другие ячейки сетки.Каждый объект имеет тип, и они могут быть помещены только в ячейки определенных столбцов в зависимости от этого типа.Например, объекты типа «ПК» можно помещать в ячейки только в столбцах 3 и 4, «пользователи» разрешены только в столбце 2 и т. Д.Чтобы было понятнее пользователю, я бы хотел выделить зеленым, когда объект можно поместить в ячейку, или красным, если это не разрешено.

Я использую стандартное перетаскивание HTML5, поэтомуИдея состоит в том, чтобы установить тип объекта для события dragstart и использовать его в обработчике dragenter, чтобы выполнить логику и показать состояние разрешения / запрета для контейнера отбрасывания. Это часть кода:

onDragStart(item: any, e: DragEvent) {
    e.stopPropagation();

    e.dataTransfer.setData("objType", item.objType);

    e.dataTransfer.effectAllowed = "copyMove";
}


listDragEnter(e: DragEvent) {
    let dragItemType: string;    

    dragItemType = e.dataTransfer.getData("objType");

    if(this.isObjectAllowed(dragItemType)) {
        // THE DRAGGED OBJECT IS ALLOWED IN THIS CELL
    }
    else {
        // NOT ALLOWED
    }
}

Это отлично работает в Firefox, но не в Chrome (ни в Opera, ни в Safari).Я читал, что в целях безопасности Chrome позволяет устанавливать только данные о событиях в обработчике dragstart и читать их в обработчике drop.Я понимаю, что могут существовать злонамеренные iframes, которые могут считывать данные, но эта мера делает невозможным использование HTML5 DnD в подобных случаях.

Есть ли способ сообщить Chrome (и другим затронутымбраузеры), чтобы обойти эту проверку безопасности и разрешить чтение данных о событиях из dragenter событий (если они не регистрируются в iframes)?.

Если нет, есть какие-нибудь идеи о том, как это сделать?Спасибо!

Answer 1

Обходного пути здесь нет, Chrome не позволяет получить доступ к объекту dataTransfer из обработчиков dragstart и drop.Итак, я добавил глобальную службу для хранения перетаскиваемого объекта в событии dragstart и чтения его в обработчике drop.

Что-то вроде:

itemDragStart(item: Item, e: DragEvent) {
  [...]

  this.globalItemService.setDragItem(item);

  [...]
}

itemDragDrop(e: DragEvent) {
  let item: Item;
  [...]

  item = this.globalItemService.getDragItem();

  [...]
}