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

问题描述

我正在使用一种小型jQuery插件，该插件模拟了本机的jQuery UI可拖放/可拖放的行为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对于任何非平凡的拖动和下降用例。例如考虑一个多选列表，其中拖动需要包括所有选定的项目，而不仅仅是拖动手势的行。很奇怪，你想要设置的东西需要在DOM中可见，但更糟糕的是，这种方法在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中删除。所以将它添加到DOM在dragstart然后使用它在设置拖动图像，然后删除它。这在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拖动自定义拖动图像节点，而不是拖动启动的节点。您可以使用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.

最后需要注意的是，在Windows上，自定义宽度上有一个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屋！