1

jsfiddle：http: //jsfiddle.net/39she/3/

HTML：

<a href="http://google.de">
  <img src="https://www.google.de/images/srpr/logo4w.png" draggable="true" />
</a>

JavaScript：

// Please forgive me this bad-designed function ;)
// quick and dirty solution
function log(msg) {
    document.body.innerHTML = document.body.innerHTML + "<hr />" + msg;
}

var myImg = document.getElementsByTagName("img")[0];

myImg.addEventListener("dragstart", function(evt) {
    log("Drag started");
});

日志消息出现在Chrome 27、Safari 5.1和Opera 12.15中。只有 IE 10 不会触发任何事件（尽管它会drop在图像随后被丢弃时触发该事件）。

Edit 1
Listening for dragstartat the link 标签在 IE 10 中运行良好。

4

1 回答 1

3

我相信您必须取消初始文本选择事件并激活拖动功能才能使其正常工作。

编辑1：

var output = document.querySelector('#message')
, myImg = document.querySelector("#test")

function log(msg) {
  output.innerHTML = msg + ' ' + (+new Date());
}

myImg.addEventListener('selectstart', function (evt) {          
  evt.preventDefault && evt.preventDefault();
  this.dragDrop && this.dragDrop();  //activates DnD for IE  
  return false;
});

myImg.addEventListener('dragstart', function (evt) { 
  log('started');
});

myImg.addEventListener('dragend', function (evt) { 
  log('ended');
});

祝你好运！

注意： 似乎 IE 默认将带有 href 属性的标签视为可拖动的。但是当您删除 href 属性时，它工作得很好。实际上很有趣。codepen.io/snypelife/pen/hImer

于 2013-06-26T20:08:42.943 回答