Question

我正在为Angular 6应用程序开发网格组件，其中每个单元格包含对象列表，用户可以将其拖放到网格中的其他单元格上。每个对象都有一个类型，根据该类型，它们只能放入某些列的单元格中。例如，类型“ PC”的对象只能放在第3列和第4列的单元格中，“用户”只允许在第2列，依此类推。为了让用户更清楚，我想在可以将对象放到单元格中时以绿色突出显示，或者在不允许的情况下以红色突出显示。

我正在使用标准的HTML5拖放功能，因此其想法是在dragstart事件上设置对象类型，并在dragenter处理程序上使用该对象类型来执行逻辑并显示allow /拒绝放置容器上的状态·这是代码的一部分：

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处理程序上读取事件数据。我了解可能存在恶意的iframe可以读取数据，但是这种措施使我们无法在此类情况下使用HTML5 DnD。

有什么办法可以告诉Chrome（和其他受影响的浏览器）绕过此安全检查，并允许从dragenter事件中读取事件数据（如果未在iframe上捕获它们）？ / p>

如果没有，关于如何执行此操作的任何想法？谢谢！

Answer 1

这里没有解决方法，Chrome不允许从dragstart和drop处理程序中访问dataTransfer对象。因此，我要做的是添加一个全局服务以将拖动的对象存储在dragstart事件上，并在drop处理程序中读取它。

类似的东西：

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

  this.globalItemService.setDragItem(item);

  [...]
}

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

  item = this.globalItemService.getDragItem();

  [...]
}

允许在Chrome中的Dragenter事件处理程序上访问拖动的项目数据

1 个答案: