Javascript 使用html5可拖动属性时保留被拖动元素的外观

在使用“可拖动”html5属性时，如何保持被拖动元素的外观。在某些浏览器（Safari和Chrome）上，拖动锚点时，拖动的辅助对象将替换为拖动元素的浏览器本机实现，如屏幕截图所示：

拖动DIV时

当拖动

HTML

下面是我组装的用于演示此问题的快速JSBin

---

谢谢

之所以会出现此问题，是因为拖动带有href属性的链接的默认行为是创建一个包含要用作拖动占位符的url的图像。您可以通过删除href属性来解决此问题，但是，要避免此问题，而不必删除href属性，您可以使用mousedown/up事件处理程序删除该属性，然后重新添加它，使锚定可单击*

$（'.draggable'）.attr（'draggable'，true）.on（'mousedown'，function（）{
if（$（this）.is（'a'））{
$（this.data（'href'，this.href））；
$（this.removeAttr（'href'）；
}
}).on（'mouseup'，函数（）{
if（$（this）.is（'a'））{
$（this.attr（'href'，$（this.data（'href'））；
}
}).on（'单击'，函数（）{
console.log（this.href）；
});
.draggable{
利润率：10px；
显示：块；
宽度：200px；
背景：#fafafa；
颜色：#333；
文字装饰：无；
高度：40px；
边框：1px实心#eaeaea；
线高：40px；
文本对齐：居中；
光标：移动；
边界半径：20px；
}

可拖动分区
我可以通过使用来保持被拖动元素的外观。如果我将以下代码添加到jsbin实例中的JavaScript中，它在Firefox、Chrome和Safari上对我有效：

$('a.draggable').on('dragstart', function (ev) {
  var dt = ev.originalEvent.dataTransfer;
  // In IE browsers, setDragImage does not exist. However, the issue we are 
  // trying to fix does not happen in these broswers. So if setDragImage is not
  // available, then just don't do anything.
  if (dt.setDragImage) 
    dt.setDragImage(ev.target, 0, 0);

});

事件的
dataTransfer
字段有一个与拖动操作关联的对象。您必须从原始DOM事件而不是jQuery事件包装器获取它，因此
ev.originalEvent.dataTransfer

对于IE浏览器，
setDragImage
不存在，但问题中报告的问题首先不会出现，因此如果
setDragImage
不存在，我们就不调用它

A带有更新的代码。
用div包装锚定标记，并在锚定标记上设置draggable=“false”

<div class="draggable">
    <a href="" draggable="false">Draggable A</a>
</div>

在这里修改您的jsbin
可能不是真正的解决方案，但删除href属性似乎可以纠正这一问题。我猜浏览器拖动带有href的锚点时的默认行为是将url作为占位符，这将覆盖没有href时发生的情况。这可能会有所帮助：我很好奇为什么要使用jQuery添加
draggable
属性？这可能与上下文无关，但在我看来，您最好简单地将
draggable=“true”
添加到HTML元素中？@Billy使用jQuery组装jsbin示例更容易，但我不希望设置
event.dataTransfer.effectAllowed
到
copy
会解决这个问题，它在chrome中似乎没有任何效果。如果我在internet explorer中找不到ev.originalEvent.dataTransfer支持的解决方案，我想我会使用此解决方案。您是否在浏览器中测试此解决方案以查看哪些浏览器支持它？不，我没有。这看起来是一个非常简单的方法来完成我设定的任务，但是caniuse.com（）声明InternetExplorer不支持setDragage方法。有什么解决办法的建议吗？太好了！非常感谢你！这对我帮助很大，因为我已经有了一个draggable=“true”元素。因此，只需在屏幕上添加一个draggable=“false”就可以为我解决这个问题。谢谢+1这对我来说非常合适！谢谢
$('a.draggable').on('dragstart', function (ev) {
  var dt = ev.originalEvent.dataTransfer;
  // In IE browsers, setDragImage does not exist. However, the issue we are 
  // trying to fix does not happen in these broswers. So if setDragImage is not
  // available, then just don't do anything.
  if (dt.setDragImage) 
    dt.setDragImage(ev.target, 0, 0);

});

<div class="draggable">
    <a href="" draggable="false">Draggable A</a>
</div>

.draggable a {
  color: inherit;
  text-decoration: inherit;
}