Как перетащить элемент наружу, когда mCustomScrollbar включен

Question

Im перетаскивая элементы из одного дел до на другой во время перетаскивания элемента не виден

Я использовал JQuery mCustomScrollbar плагин для прокрутки

http://jsfiddle.net/jt1c8o81/

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> 

JQuery код

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

Может ли один предложить мне, где им неправильно

Answer 1

Пожалуйста, используйте помощник: «клон» с appendTo функции. Проверьте код ниже.

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

Answer 2

я упоминал, что контейнеры с тащили элементами спрятался переполнение. Вот почему вы не можете видеть элементы при перетаскивании. Просто установите overfolow видимые при запуске перетаскивания и обратно скрытые на потянет концы:

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

посмотреть здесь, как это работает:

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