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.
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With