拖放：Chrome中的游標

Question

我的問題是在Chrome中，光標不會隨着可拖動項移動。 在IE中工作正常。 我有jquery和jquery-ui 1.11.1，這是我正在使用的腳本

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));

    }

也許缺少了一些東西。 幫助將不勝感激

Answer 1

問題是拖動圖像（“陰影”）被移到#word的角落，對嗎？

Chrome似乎在計算位置錯誤，可能是因為<span>和<center>標簽，我想...

您可以使用setDragImage方法修復該問題，將setDragImage設置為事件的target ，並根據點擊位置設置偏移量，這將強制Chrome正確渲染它：

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);
}

它在這里工作http://jsfiddle.net/wv19zzsd/5/

（在我的小提琴中，我將“類型”更改為“文本/純文本”只是為了測試是否是問題的原因，但不是）