0
我想創建一個拖放菜單，用戶可以將圖像縮略圖從div拖動到畫布上。html drag/drop setDragImage在第一次拖動時沒有設置幻影圖像
問題是源div使用sprite來顯示其背景縮略圖，所以我必須使用setDragImage來允許在拖動div時顯示圖像。
我可以成功拖動div到畫布並放下圖片，但是我的問題是，雖然拖動幻影圖像不顯示，直到第二次拖動div。
我用從前面的回答驗證碼：[HTML5 Drag and Drop events and setDragImage browser support
，這裏是我的這段代碼稍加修改：
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");
});
什麼奇怪的是，當我彈出$節點上的邊界。克隆（）它被設置，當我做第一次拖動它似乎並沒有把圖像放在那裏。
我也把手動寬度和高度，所以我知道它不是圖像的大小。
我在菜單出現之前預載圖像。
任何想法？