javascript - How to change icon during dragoverdragenter HTML 5 Drag and Drop - Stack Overflow

admin管理员组

文章数量:1404773

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

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 = ".jpg";
        event.dataTransfer.setDragImage(img, 0, 0);
      });
    }
  };
});

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 = ".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 = ".jpg";
  event.dataTransfer.setDragImage(img, 0, 0);

  return false;
});

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

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./teams/slug/google.jpg";
        event.dataTransfer.setDragImage(img, 0, 0);
      });
    }
  };
});

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./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./teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);

  return false;
});

• javascript
• html
• angularjs

Share Improve this question Follow asked Jan 11, 2018 at 17:23 MoussaMoussa 4,15477 gold badges3636 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

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

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

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

3. 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).

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

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

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.

本文标签： javascriptHow to change icon during dragoverdragenter HTML 5 Drag and DropStack Overflow