拖放：Chrome 中的光标答案

【问题标题】：Drag & Drop : Cursor in Chrome拖放：Chrome 中的光标
【发布时间】：2014-09-29 11:14:43
【问题描述】：

我的问题是，在 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));

    }

也许缺少某些东西。非常感谢您的帮助

【问题讨论】：

根据我的经验，光标在 chrome 中正确移动，请创建一个 jsfiddle 或 codepen。
感谢 Luizgrs 的快速回复。我不熟悉创建 jsfiddle，但这就是我所做的。希望能帮助到你。 jsfiddle.net/8hwh7pkt
感谢 Luizgrs。我不熟悉创建 jsfiddle，但这就是我所做的。希望能帮助到你。再次感谢。 jsfiddle.net/8hwh7pkt

标签： javascript jquery jquery-ui google-chrome

【解决方案1】：

问题是拖动图像（'shadow'）被移动到#word的角落，对吗？

Chrome 似乎计算位置错误，可能是因为<span> 和<center> 标签，我猜...

您可以使用setDragImage 方法修复该问题，将DragImage 设置为事件的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/

（在我的小提琴中，我将类型更改为“文本/纯文本”只是为了测试这是否是问题的原因，但事实并非如此）

【讨论】：

感谢 Luizgrs。完成并工作。非常感谢你。非常感谢您的快速帮助。魔术。