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

Answer 2

I mentioned that containers with dragged elements has hidden overflow. That why you cant see elements on drag. Just set overfolow to visible on drag start and back to hidden on drags ends:

   stop: function (event, ui) {
       $(".mCustomScrollBox").attr("style", "overflow: hidden !important;");
  $(".mCSB_container").attr("style", "overflow: hidden !important;");
},
start: function(event,ui){
    $(".mCustomScrollBox ").attr("style", "overflow: visible !important;");
     $(".mCSB_container").attr("style", "overflow: visible !important;");
},

see here how it works:

http://jsfiddle.net/jt1c8o81/19/