如何在启用mCustomScrollbar时将元素拖动到外部

How to drag the element to outside when mCustomScrollbar is enabled

本文关键字：元素 拖动 外部 启用 mCustomScrollbar      更新时间：2023-10-18

Im将元素从一个div拖动到另一个div，而拖动元素在中不可见

我使用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;
}

有人能告诉我哪里错了吗

请使用带有appendTo函数的helper:"clone"。检查以下代码

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

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

   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/

相关文章：