启用mCustomScrollbar时如何将元素拖到外面

Question

我将元素从一个 div 拖动到另一个 div，但拖动元素不可见

我使用了jquery mCustomScrollbar 插件来滚动

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

我提到带有拖动元素的容器隐藏了溢出。这就是为什么你在拖动时看不到元素的原因。只需将溢出设置为在拖动开始时可见，并在拖动结束时设置为隐藏：

   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/

Answer 2

请使用 helper:"clone" 和 appendTo 函数。检查下面的代码。

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

启用mCustomScrollbar时如何将元素拖到外面

How to drag the element to outside when mCustomScrollbar is enabled

javascript

jquery

jquery-ui

jquery-plugins

mcustomscrollbar