启用HTML5拖放

Question

我想将图像拖到放置目标上。

我使用以下代码：

$img.on('drag dragstart dragend dragleave drop', function (e) {
    e.preventDefault();
    e.stopPropagation();
});
$img.on('dragstart', function (e) {
    e.preventDefault();
    e.dataTransfer.setData('text', 'foo');
    self._handleThumbClick.bind( self );
});

不幸的是，这并不总是允许我拖动图像。我在这里做错了什么？我想将图像从其位置拖动到放置目标。 HTML5具有内置的拖放功能。图片上方的事件侦听器应按照以下说明进行操作：

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

请注意上面的代码如何映射本教程中的代码。

这是我的html：

<div class="thumbnail-wrapper showing" data-auto="image-picker-thumbnail-wrapper" draggable="true"><img class="thumbnail" data-src="https://test.com:8033/lr_files/v1.0/catalogs/4da2ea94548547429b8e993db4350aa3/assets/344118135fb618dde24d8ef74b961d57/revisions/e6a018abb1ac3e98c2e75789c91911f2/renditions/f2964d151c99f1c500fb8f628c921d2e" data-width="1655" data-height="2559" data-auto="image-picker-thumbnail-img" draggable="true" src="https://test.com/lr_files/v1.0/catalogs/4da2ea94548547429b8e993db4350aa3/assets/344118135fb618dde24d8ef74b961d57/revisions/e6a018abb1ac3e98c2e75789c91911f2/renditions/f2964d151c99f1c500fb8f628c921d2e" style="height: 174.723px;"></div>