使用html5 draggable属性时,保留拖动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事件而不是从jQ​​uery事件包装器中获取它,所以ev.originalEvent.dataTransfer.

对于IE浏览器,setDragImage不存在,但问题中报告的问题不会首先发生,所以如果setDragImage不存在,我们就不要调用它.

一箱有更新的代码.

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>

*注意：堆栈片段不允许您点击链接。