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

Posted 2023-05-08

【中文标题】拖动具有滚动的容器时，可拖动项目不可见

【英文标题】：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) 

    
);

【参考方案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();
    
);