問題描述

我正在開發一個 小型 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?

編輯

在玩了一會兒這個功能之后，似乎這個功能非常有限.

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 中可見，但更糟糕的是，從 IE 版本 11 開始，此方法根本沒有實現.

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.

但是，通過一些努力，我能夠讓它合理地令人滿意地工作.可以在 timeout 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.

最后要注意的是，在 Windows 上，自定義拖動圖像節點的寬度有 300 像素的限制，這適用于所有可拖動對象，而不僅僅是自定義節點.因此，如果拖動圖像太大，瀏覽器會應用較重的徑向漸變.

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 瀏覽器支持的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！