How to drag the element to outside when mCustomScrollbar is enabled

Question

Im dragging elements from one div to on other while dragging element is not visible

I used jquery mCustomScrollbar plugin to scroll

http://jsfiddle.net/jt1c8o81/

HTML Code

<table><tr>
    <td><div id="ParentDiv" class="mCustomScrollbar _mCS_4 ui-sortable ui-droppable"></div></td>
<td><div style="border:1px solid blue;float:left;margin-top:0px;" class="drop">DROP HERE
    </div></td></tr>
    </table>

JQuery Code

for (var i = 0; i < 100; i++) {
    var el = "<div class='childDiv draggable'>iData " + i + "</div>";
    $("#ParentDiv").append(el);
}

$(".draggable").draggable({
    containment: "window",
    cursor: "crosshair",
    revert: "invalid",
    scroll: true,
    stop: function (event, ui) {
        if ($(this).hasClass("tsh")) {
            $(this).attr("style", "");

        }
    },
    drag: function (event, ui) {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
      //  $(this).text('x: ' + xPos + 'y: ' + yPos);
        var shw_xy = 'x: ' + xPos + 'y: ' + yPos;
        console.log(shw_xy);


    }

});
$(".drop").droppable({
    accept: ".draggable",
    activeClass: "myhighlight",
    drop: function (event, ui) {
 $(this).removeClass("border").removeClass("over");
                    //$(this).addClass("over");
                    var dropped = ui.draggable;
                    var droppedOn = $(this);


                    $(dropped).detach().css({
                        top: 0,
                        left: 0
                    }).appendTo(droppedOn);
    },
    over: function (event, elem) {
        $(this).addClass("over");
        $(this).removeClass("img_added");

        var $this = $(this);

        console.log("over");

    },
    activate: function (event, elem) {

    }
});

CSS

#ParentDiv {
    background-color: #ffffff;
    border: 1px solid #e1d193;
    border-radius: 4px;
    float: left;
    height: 600px;
    margin-bottom: 10px;
    margin-left: 15px;
    min-height: 200px;

    padding-bottom: 20px;
    padding-left: 23px;
    padding-top: 20px;
    width: 252px;
}
#ParentDiv .childDiv {
    border:1px solid red;
    border-radius: 4px;
    height: auto;
    margin: 2px;
    position: relative;
    z-index: 5000;
}
#ParentDiv .childDiv {
    float: left;
    height: auto;
    width: 70px;
}
.childDiv {
    border:1px solid green;
    border-radius: 4px;
    height: auto;
    margin: 2px;
    position: relative;
    z-index: 5000;
}
 .childDiv {
    float: left;
    height: auto;
    width: 70px;
    margin:2px;
}

Can any one suggest me where im wrong

Answer 1

Please use helper:"clone" with appendTo function. Check below Code.

$(".element").draggable({
    helper: function () { return $
        (this).clone().appendTo(".element").css("zIndex",2).show();
    }
});