Custom Drag Image

by Ea Bangalore

HTML

<div draggable="true">I can be dragged</div>

<div draggable="true">
   <ul>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
   </ul>
</div>

CSS

[draggable='true'] {

    color: white;
    font-weight: bold;
    background-color: green;
    text-align: center;
    padding: 50px;
    width: 100px;
    border-radius: 10px;
}

.dragImage {
    background-color: orange;
    pointer-events: none;
}

#dropZone {
    margin-top: 50px;
}

JavaScript

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

});