Drag & Drop : Cursor in Chrome

Question

My problem is that in Chrome the cursor doesn't move with the draggable item. It works fine in IE. I have jquery and jquery-ui 1.11.1 and this the script I am using

function allowDrop(ev) {
    ev.preventDefault();
}


function drag(ev) {
    ev.target.innerHTML += ' '; // Add space so that there is no kerning...
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
    document.getElementById(data).className = " ";
}

function drop(ev)
    {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");

      if(ev.target.getAttribute('data-drop') == data)
        ev.target.appendChild(document.getElementById(data));

    }

Maybe something is missing. Help would really be appreciated

Answer 1

The problem is the drag image ('shadow') being moved to the corner of the #word , correct?

It looks like Chrome is calculating the position wrong, may be because the <span> and <center> tags, I guess...

You can fix that using the setDragImage method, set the DragImage to be the target of the event and set the offset according to the click position, this will force Chrome to render it right:

function drag(ev) {
    ev.target.innerHTML += ' '; // Add space so that there is no kerning...
    ev.dataTransfer.setData("Text", ev.target.id);

    ev.dataTransfer.setDragImage(ev.target, ev.layerX - ev.target.offsetLeft, ev.layerY - ev.target.offsetTop);
}

It's working here http://jsfiddle.net/wv19zzsd/5/

(In my fiddle I changed the Type to 'text/plain' only to test if that was the cause of the issue, but it is not)