如何在拖动/拖动HTML 5期间更改图标 [英] How to change icon during dragover/dragenter HTML 5 Drag and Drop

问题描述

如何在拖动或Dragenter期间更改DnD的图标(拖放)?甚至有可能吗?

How to change DnD's (drag and drop) icon during dragover or dragenter? Is it even possible?

如果拖放的源位于html页面内部，则可以在dragstart期间更改图标(例如，将div拖动到另一个div中).这是我的代码，我正在使用angular，我已经设置了 plunker .

I am able to change the icon during dragstart if the source of the drop is inside the html page (for example drag a div in an other div). Here is my code, I am working with angular, I have set a plunker.

app.directive('drag', function() {
  return {
    link: function(scope, element, attr) {
      element.attr('draggable', true);
      element.css('cursor', 'move');

      element.bind('dragstart', function(event) {
        console.log('dragstart');
        console.log(event.dataTransfer);
        event.dataTransfer.effectAllowed = 'move';

        var img = document.createElement("img");
        img.src = "https://image.flaticon.com/teams/slug/google.jpg";
        event.dataTransfer.setDragImage(img, 0, 0);
      });
    }
  };
});

但是如果源是例如文件或URL，则更改图标无效，这是代码.我正在尝试在拖动或Dragenter期间更改图标.

But it doesn't work to change the icon if the source is a file for example or an url, here is the code. I am trying to change the icon during dragover or dragenter.

element.bind('dragenter', function(event) {
  console.log('dragenter');
  event.dataTransfer.effectAllowed = 'move';

  var img = document.createElement("img");
  img.src = "https://image.flaticon.com/teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);
});

element.bind('dragover', function(event) {

  if (event.preventDefault) {
    event.preventDefault();
  }

  if (event.stopPropagation) {
    event.stopPropagation();
  }

  console.log('dragover');

  element.addClass('dragged');

  var img = document.createElement("img");
  img.src = "https://image.flaticon.com/teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);

  return false;
});

推荐答案

根据规范，除拖动启动外，不能在其他事件上使用 setDragImage .参见此处: https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage

As per the specification, you cannot use setDragImage on events other than drag start. See here: https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage

setDragImage(element，x，y)方法必须运行以下步骤:

The setDragImage(element, x, y) method must run the following steps:

1. 如果DataTransfer对象不再与拖动数据相关联 存放，退货.什么都没发生.

1. If the DataTransfer object is no longer associated with a drag data store, return. Nothing happens.

如果拖动数据存储区的模式不是读/写模式，请返回. 什么都没发生.

If the drag data store's mode is not the read/write mode, return. Nothing happens.

如果元素是img元素，则将拖动数据存储位图设置为 元素的图像(以其固有尺寸)；否则，设置拖动 数据存储位图到从给定元素生成的图像( 目前尚未指定执行此操作的确切机制).

If element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).

将拖动数据存储热点坐标设置为给定的x，y 坐标.

Set the drag data store hot spot coordinate to the given x, y coordinate.

在这里，您可以看到拖动数据存储区仅在dragstart上处于读/写模式:

And here, you can see that the drag data store is in read/write mode only on dragstart: https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-rw

读/写模式用于dragstart事件.可以将新数据添加到 拖动数据存储.

Read/write mode For the dragstart event. New data can be added to the drag data store.

出于安全原因，这些模式是存在的，您可以在拖放的不同阶段执行某些操作.

These are modes are there for security reasons, there are things you can do on the different stages of a drag and drop.

这篇关于如何在拖动/拖动HTML 5期间更改图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！