Html перетаскивание setDragImage не устанавливает призрачное изображение при первом перетаскивании ⇐ Jquery

[Anonymous]

Я пытаюсь создать меню перетаскивания, в котором пользователь может перетащить миниатюру изображения из элемента div на холст.

Проблема в том, что исходный элемент div использует спрайт для отображения его миниатюры фона, поэтому мне нужно использовать setDragImage, чтобы изображение отображалось при перетаскивании элемента div.

Я могу успешно перетащить div на холст и нормально удалить изображение, однако моя проблема в том, что при перетаскивании призрачного изображения не отображается до тех пор, пока я не перетащу div во второй раз. .

Я использую этот код из предыдущего ответа: [События перетаскивания HTML5 и поддержка браузера setDragImage

и вот моя слегка измененная версия этого кода:

Код: Выделить всё

var isIE =  (typeof document.createElement("span").dragDrop === "function");

$.fn.customDragImage = function(options) {
var offsetX = 0,
offsetY = 0;

var createDragImage = function($node, x, y) {
var $img = $(options.createDragImage($node));
icon = "icon" + window.draggedimgsrc;
offsetX = window[icon][2] / 2;
offsetY = window[icon][3] / 2;
$img.css({
"top": Math.max(0, y-offsetY)+"px",
"left": Math.max(0, x-offsetX)+"px",
"position": "absolute",
"pointerEvents": "none"
}).appendTo(document.body);

setTimeout(function() {
$img.remove();
});

return $img[0];
};

if (isIE) {
$(this).on("mousedown", function(e) {
var originalEvent = e.originalEvent,
node = createDragImage($(this), originalEvent.pageX, originalEvent.pageY);
node.dragDrop();
});
}

$(this).on("dragstart", function(e) {
var originalEvent = e.originalEvent,
dt = originalEvent.dataTransfer;
if (typeof dt.setDragImage === "function") {
node = createDragImage($(this), originalEvent.pageX, originalEvent.pageY);
console.log("node="+node);
dt.setDragImage(node, offsetX, offsetY);
}
});

return this;

};

$("[draggable='true']").customDragImage({
createDragImage: function($node) {
//init icon [0] = icon filename | [1] = icon set | [2] = icon width | [3] = icon height
icon = "icon" + window.draggedimgsrc;
window.draggedimgset = window[icon][1];
image="/boards/markers/soccerm/set" + window[icon][1] + "/" + window[icon][0] + ".png";
return $node.clone().css("width", window[icon][2]).css("height", window[icon][3]).css("background", "transparent url(" + image + ") no-repeat center");        }
}).on("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("Text", "Foo");
});

Что странно, когда я добавляю границу в $node.clone(), она устанавливается, когда я делаю первое перетаскивание, но, похоже, она не ставит изображение там.

Я также вручную задал ширину и высоту, чтобы знать, что дело не в размере изображения.

И я предварительно загружаю изображение перед появлением меню.

Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/308 ... first-drag