CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Nik Sumeiko
Nik Sumeiko

Reputation: 8741

Why HTML5 drag and drop dragImage is not displayed when it's hidden?

I have faced a problem when setting up 'dragImage' in HTML5 drag and drop as div element. The problem is that when helper - 1st argument of setDragImage(helper, x, y) function is not presented in the dom or is hidden, it's not visible when 'dragstart' event is fired. Have a look at my fiddle: http://jsfiddle.net/AemN5/10/

In the fiddle I am rendering helper (it's colored into yellow), than try to drag green draggable box, helper is attached to the mouse when drag starts. However, try to click on the button above the helper to hide helper. Than try again dragging green draggable box - no helper is attached to my mouse.

Any thoughts why it's happening and more important how to solve the problem? As my main goal is to have invisible helper and only when user start dragging make it visible attached to the cursor.

Upvotes: 2

Views: 3155

Answers (2)

KiranYNG
KiranYNG

Reputation: 41

Try doing like this..
chrome requires the image to be displayed atleast until the drag is started.

$("[draggable]").on("dragstart", function(e) {
    $("#img1").show();

    e.originalEvent.dataTransfer.setDragImage(helper, 50, 50);

    setTimeout(function(){
        $("#img1").hide();
    },0);
});

Upvotes: 0

Gavriel
Gavriel

Reputation: 19237

Here is one possible solution http://jsfiddle.net/AemN5/12/

Upvotes: 2

Related Questions