HTML5拖放事件和setDragImage浏览器支持 [英] HTML5 Drag and Drop events and setDragImage browser support

问题描述

我正在使用小型jQuery插件，模仿jQuery UI可拖放/ droppable行为与原生HTML5拖放事件。

I'm working on a small jQuery plugin that mimics the jQuery UI draggable/droppable behavior with native HTML5 drag and drop events.

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

A feature I'd want to add is the ability to specify the node which will serve as the drag proxy.

我做了一些研究，并根据MDN ，这样做需要使用传递图像或元素的 setDragImage（）。

对 setDragImage

I did a bit of research, and according to MDN, to do this requires the use of setDragImage(), passing an image or an element.
What is the support for setDragImage in different browsers?

我注意到有一个插件名为jquery.event.drag ，它与我对这个问题的预期不同。

这个功能需要我做一些类似上面的插件的解决方法，或者如果在大多数或所有浏览器中使用 setDragImage ？

I've noticed there's a plugin named jquery.event.drag which takes a different than I expected to this problem.
Would this feature require me to make some kind of workaround like the above plugin, or should this be possible out-of-the-box in most or all browsers using setDragImage?

编辑

EDIT

使用此功能后，看起来这个功能相当有限。

After playing around a bit with this functionality, it would seem that this function is quite limited.

除了在相当多的浏览器中不支持外，使用任意的DOM元素作为助手需要在DOM树中并可见，因此有元素本身在身体上，并且它的副本作为处理程序。这对于这种插件来说是不需要的。

Besides having no support in quite a few browsers, using an arbitrary DOM element as the helper requires it to be in the DOM tree and visible, and so you have the element itself on the body, and a copy of it as the handler. This is mostly unwanted for this sort of plugin.

此外，即使满足正确的条件，渲染也是有问题的。当尝试从< span> TEST< / span> 创建帮助程序时，助手本身只显示一个尺寸为 span的白色矩形。

Further more, rendering is also problematic even when the right terms are met. When trying to create a helper from <span>TEST</span>, the helper itself only showed a white rectangle with the dimensions of the span.

这些问题是否按照规格预期？

Are these issues that were to be expected according to the specs? Could they be fixed in code or would they require a workaround?

推荐答案

setDragImage是IMO对于任何不重要的拖拽的重要功能， drop用例。例如考虑多选择列表，其中拖动需要包括所有选择的项目，而不仅仅是拖动手势被作出的行。奇怪的是，你想要设置的东西需要在DOM中可见，但更糟的是，这个方法在IE版本11中没有在IE上实现。

setDragImage is IMO a vital feature for any non trivial drag and drop use case. e.g consider a multi select list where a drag needs to include all the selected items and not just the row that the drag gesture was made on. it's odd that the thing you want to set needs to be visible in the DOM but even worse is that this method is not implemented at all in IE as of version 11.

然而，有点努力，我能够使其工作令人满意。自定义拖动图像节点可以在超时0函数中从DOM中移除。因此将其添加到dragstart中的DOM，然后在设置拖动图像中使用它，然后删除它。这在FF中完美工作，但在Chrome中，拖动图像节点将在超时触发之前闪烁。一种防止这种情况的方法是将其定位，使得实际的浏览器生成的拖动图像将出现在完全相同的位置，这不像它的声音那么糟，因为您可以控制自定义拖动图像相对于光标的位置。

However, with a bit of effort I was able to get it working reasonably satisfactorily. The custom drag image node can be removed from the DOM in a timeout 0 function. so add it to the DOM in dragstart then use it in set drag image and then remove it. This works perfectly in FF but in chrome the drag image node will flicker before the timeout fires. One way to prevent this is to position it such that the actual browser generated drag image will appear in exactly the same place, this is not as bad as it sounds since you can control the position of the custom drag image relative to the cursor.

我最近玩这个游戏，并且能够在IE上使用它。诀窍是得到IE拖动自定义拖动图像节点，而不是dragstart启动的节点。你可以使用IE特定的dragDrop（）方法来做到这一点。

I was playing with this recently and was able to get it working on IE as well. the trick there is to get IE to drag the custom drag image node and not the node that dragstart fired on. you can do this with the IE specific dragDrop() method.

最后要注意的是，在窗口上有一个300px的宽度限制拖动图像节点这适用于所有拖动事件，而不仅仅是自定义节点。因此如果拖曳图片太大，浏览器会套用粗径向渐变。

The final thing to be aware of is that on windows there is a 300px limit on the width of the custom drag image node this applies to all draggables not just the custom node actually. so the browser applies a heavy radial gradient if the drag image is too big.

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

});

这篇关于HTML5拖放事件和setDragImage浏览器支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！