html实现拖摘添加,HTML5拖放事件和setDragImage浏览器支持

Woody..

15

setDragImage对于任何非平凡的拖放用例都是IMO的重要特性.例如,考虑多选列表,其中拖动需要包括所有选定的项而不仅仅是拖动手势所在的行.奇怪的是,您想要设置的东西需要在DOM中可见,但更糟糕的是,从版本11开始,IE中根本没有实现此方法.

然而,通过一些努力,我能够让它合理地令人满意地工作.可以在超时0函数中从DOM中删除自定义拖动图像节点.所以在dragstart中将它添加到DOM然后在设置拖动图像中使用它然后将其删除.这在FF中完美地工作,但在chrome中,拖动图像节点将在超时触发之前闪烁.防止这种情况的一种方法是将其定位为使得实际浏览器生成的拖动图像将出现在完全相同的位置,这并不像听起来那么糟糕,因为您可以控制自定义拖动图像相对于光标的位置.

我最近正在玩这个,并且能够让它在IE上工作.诀窍是让IE拖动自定义拖动图像节点而不是拖动启动的节点.你可以用IE特定的dragDrop()方法做到这一点.

最后要注意的是,在Windows上,自定义拖动图像节点的宽度有300px的限制,这适用于所有可拖动的实际上不仅仅是自定义节点.因此,如果拖动图像太大,浏览器会应用较大的径向渐变.

$(function() {

(function($) {

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

$.fn.customDragImage = function(options) {

var offsetX = options.offsetX || 0,

offsetY = options.offsetY || 0;

var createDragImage = function($node, x, y) {

var $img = $(options.createDragImage($node));

$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);

dt.setDragImage(node, offsetX, offsetY);

}

});

return this;

};

}) (jQuery);

$("[draggable='true']").customDragImage({

offsetX: 50,

offsetY: 50,

createDragImage: function($node) {

return $node.clone().html("I'm a custom DOM node/drag image").css("backgroundColor", "orange");

}

}).on("dragstart", function(e) {

e.originalEvent.dataTransfer.setData("Text", "Foo");

});

});