Question

这里将动态子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) {

    }
});

Answer 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({.....})

中添加帮助：'克隆'

要详细了解此问题，请查看此链接：jQuery Draggable and overflow issue

Answer 2

请使用helper：“clone”和appendTo函数。请查看以下代码。

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

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

2 个答案: