HTML5拖放事件和setDragImage浏览器支持

Question

我正在研究一个小的jQuery插件,它模仿使用原生HTML5拖放事件的jQuery UI可拖动/可放置行为.

我想要添加的功能是指定将用作拖动代理的节点的功能.

我做了一些研究,根据MDN,要做到这一点需要使用setDragImage(),传递图像或元素.在不同的浏览器中有什么
支持setDragImage？

我注意到有一个名为jquery.event.drag的插件,它与我对此问题的预期不同.
这个功能是否需要我像上面的插件一样制作某种解决方法,或者在大多数或所有浏览器中使用它是否可以开箱即用setDragImage？

编辑

在使用此功能玩了一下之后,似乎这个功能非常有限.

除了在相当多的浏览器中没有支持之外,使用任意DOM元素作为帮助器需要它在DOM树中并且可见,因此您将元素本身放在主体上,并将其副本作为处理程序.对于这种插件,这通常是不需要的.

此外,即使满足正确的术语,渲染也是有问题的.当试图创建一个帮助器时<span>TEST</span>,帮助器本身只显示一个白色矩形,其尺寸为span.

这些问题是根据规格预期的吗？它们可以修复代码还是需要解决方法？

Answer 1

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

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

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

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

http://jsfiddle.net/stevendwood/akScu/21/

$(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");
});

});