Javascript 使用jQuery事件拖放处理滚动条_Javascript_Jquery_Css_Drag And Drop_Z Index

Javascript 使用jQuery事件拖放处理滚动条

javascript jquery css

Javascript 使用jQuery事件拖放处理滚动条,javascript,jquery,css,drag-and-drop,z-index,Javascript,Jquery,Css,Drag And Drop,Z Index,我有一个房间沙发，上面有一些玩具沙发，看到了吗玩具绝对定位，可以在房间的墙上拖动。房间容器div具有固定的高度和高度，因此房间具有水平和垂直卷轴。我使用插件来设置DnD。我设法将玩具设置为仅在墙的底部拖动，但当有卷轴时，组件会向墙外移动一点（仅移动到墙的实际宽度）我只想展示玩具的一部分，如下所示我试着设置z-index，但没有效果，有谁有更好的主意在看不到实际代码的情况下，我想overflow:hidden可以解决这个问题。您可以使用scrollTo插件处理滚动条。下面的示例显示ov

我有一个房间沙发，上面有一些玩具沙发，看到了吗

玩具绝对定位，可以在房间的墙上拖动。房间容器div具有固定的高度和高度，因此房间具有水平和垂直卷轴。我使用插件来设置DnD。我设法将玩具设置为仅在墙的底部拖动，但当有卷轴时，组件会向墙外移动一点（仅移动到墙的实际宽度）

我只想展示玩具的一部分，如下所示

我试着设置z-index，但没有效果，有谁有更好的主意

在看不到实际代码的情况下，我想overflow:hidden可以解决这个问题。

您可以使用scrollTo插件处理滚动条。

下面的示例显示overflow:hidden确实满足了您的要求。您的代码有问题，但除非您发布，否则我们无法帮助您


例子
#容器{
背景色：#ddff；
高度：300px；
溢出：隐藏；
位置：相对位置；
宽度：300px；
}
#容器，孩子{
背景色：#ddffdd；
高度：50px；
位置：绝对位置；
宽度：50px；
}
#容器。儿童1{
左：100px；
顶部：70像素；
}
#容器。儿童2{
左：270px；
顶部：170px；
}

溢出：隐藏

没有效果，因为

玩具

div是绝对定位的。请看我上面的答案，溢出：隐藏应该是解决方案得到了一些东西，需要绝对定位房间div和房间容器div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>

        <style type="text/css">

            #container {
                background-color:#ddddff;
                height:300px;
                overflow:hidden;
                position:relative;
                width:300px;
            }

            #container .child {
                background-color:#ddffdd;
                height:50px;
                position:absolute;
                width:50px;
            }

            #container .child1 {
                left:100px;
                top:70px;
            }

            #container .child2 {
                left:270px;
                top:170px;
            }

        </style>
    </head>

    <body>

        <div id="container">
            <div class="child child1"></div>
            <div class="child child2"></div>
        </div>

    </body>
</html>