Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

e.dataTransfer.setDragImage at full opacity

I am using the HTML5 Drag and Drop API. I have set a drag image using a visible node, but it is ghosted/partially transparent.

Setting the the drag image:

evt.dataTransfer.setDragImage(someVisibleElement, -12, -8);

Every example I see is translucent:

http://www.kryogenix.org/code/browser/custom-drag-image.html

It looks like you cannot set opacity on this element, is this true? No option is in MDN docs, but I was hoping someone could confirm. Seems strange to lock us in to 50% opacity if we can set an image.

like image 667
SimplGy Avatar asked Jun 30 '14 21:06

SimplGy


People also ask

How do I drag an image into HTML?

The image link is inserted in the HTML page using <img> src attribute. Whenever we are going to insert the image, we have to enable draggable=”true”. Also, enable ondragstart=”drag(event)” so that this image can be draggable along with setting the image width and height.

How do I drag an image into JavaScript?

Introduction to JavaScript Drag and Drop API By default, only image and text can be draggable. To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.

How drag and drop works in JavaScript?

The HTML Drag and Drop API relies on the DOM's event model to get information on what is being dragged or dropped and to update that element on drag or drop. With JavaScript event handlers, you can turn any element into a draggable item or an item that can be dropped into.


2 Answers

I didnt found easy way

but you can do it hard :-D. create/clone element you want to see dragging, append to dom, set position fixed and between dragstart and dragend update his position according your mouse position.

like image 130
user2269215 Avatar answered Sep 21 '22 15:09

user2269215


You cannot set opacity on this element. Would love to be able to point to the part of the spec or bug report that notes this is the case.

like image 42
SimplGy Avatar answered Sep 19 '22 15:09

SimplGy