拖动具有滚动的容器时，可拖动项目不可见答案

【问题标题】：draggable item not visible while dragging container having scroll拖动具有滚动的容器时，可拖动项目不可见
【发布时间】：2014-09-25 12:29:03
【问题描述】：

JS FIDDLE DEMO

这里是动态添加子 Div 到 parentDiv，拖放功能工作正常，唯一的问题是可拖动项目在 parentDiv 之外不可见，如果它有滚动条，我错过了什么吗？

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

    }
});

【问题讨论】：

标签： javascript jquery jquery-ui draggable

【解决方案1】：

下面是工作示例：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'
});

您只需要在$(".draggable").draggable({.....})

中添加 helper:'clone'

要了解有关此问题的更多信息，请查看此链接：jQuery Draggable and overflow issue

【讨论】：

我也面临同样的问题，我已经添加了 helper:clone 和 im using mCustomScrollbar

【解决方案2】：

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

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

【讨论】：