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

Question

当使用'draggable' html5 属性时，如何保持被拖动的A 元素的外观。在某些浏览器（Safari 和 Chrome）上，当拖动锚点时，拖动的助手会被拖动元素的浏览器原生实现替换，如屏幕截图所示：

拖动DIV时

拖动A时

HTML

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

CSS

$('.draggable').attr('draggable', true);

这是我为演示此问题而组装的快速 JSBin http://jsbin.com/pihayeceza/1/edit

谢谢

Answer 1

我可以使用DataTransfer.setDragImage 保留被拖动元素的外观。如果我将以下代码添加到您的 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 字段有一个与拖动操作关联的DataTransfer 对象。您必须从原始 DOM 事件而不是 jQuery 事件包装器中获取它，所以ev.originalEvent.dataTransfer。

对于 IE 浏览器，setDragImage 不存在，但问题中报告的问题一开始就没有发生，所以如果setDragImage 不存在，我们就不会调用它。

带有更新代码的bin。

Answer 2

出现这个问题是因为拖动带有 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', function () {
  if ($(this).is('a')) {
    $(this).attr('href', $(this).data('href'));
  }
}).on('click', function () {
  console.log(this.href);
});

.draggable {
  margin: 10px;
  display: block;
  width: 200px;
  background: #fafafa;
  color: #333;
  text-decoration: none;
  height: 40px;
  border: 1px solid #eaeaea;
  line-height: 40px;
  text-align: center;
  cursor: move;
  border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="draggable">Draggable DIV</div>
  <a href="http://www.google.com" target="_blank" class="draggable">Draggable A</a>

*注意：stack sn-ps 不允许您点击链接。

Answer 3

用 div 包裹你的锚标签，并在锚标签上设置 draggable="false"。

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

您需要额外的样式来防止按钮/链接看起来是蓝色和带下划线的。

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

在这里修改了你的 jsbin http://jsbin.com/rebayif/edit