draggable item not visible while dragging container having scroll

Question

JS FIDDLE DEMO

Here am adding dynamically child Div to parentDiv, drag drop functionality work fine, the only problem is the draggable item is not visible outside the parentDiv, if it have scrollbar, am i missing something ?

HTML:

<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>

---

JS:

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: false,
    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) {

    }
});

Answer 1

Here is the working example: http://jsfiddle.net/3Xgnu/7/

$(".draggable").draggable({
    containment: "window",
    cursor: "crosshair",
    revert: "invalid",
    scroll: false,
    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);
    },
    helper:'clone'
}); 

You just need to add the helper:'clone' inside $(".draggable").draggable({.....})

To know more about this problem check this link out: jQuery Draggable and overflow issue