Custom Drag Image

by zoldello

HTML

<div draggable="true">I can be dragged</div>
<div class="abc" data-ok="ok">
    <img src="http://www.placehold.it/10x15" alt="abc">
        <span>Abc</span>
 </div>
    
    <!-- http://jsfiddle.net/zoldello/hj5t7331/ -->

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");
            var $abc = $('.abc');
            console.log($abc.html());
            
            return $abc.clone().html($abc.html());
       ...