使用’draggable’
html5属性时,如何保留拖动的A元素的外观.在某些浏览器(Safari& Chrome)上拖动锚点时,拖动的帮助器将被替换为拖动元素的浏览器本机实现,如屏幕截图所示：
拖动DIV时
拖动A时
@L_404_1@
<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
谢谢
解决方法
我可以使用
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);
});
事件的dataTransfer字段具有与拖动操作关联的DataTransfer对象.您必须从原始DOM事件而不是从jQuery事件包装器中获取它,因此ev.originalEvent.dataTransfer.
对于IE浏览器,setDragImage不存在,但问题中报告的问题不会出现在第一位,所以如果没有setDragImage,我们就不会调用它.
