Question

我正在尝试使网页左侧的滚动div包含可拖动的图像。我希望这些图像能够放置在屏幕上的任何位置。

但是，除非我有“ overflow：visible;”，否则它们目前仅限于其父div。在父级上进行设置，但是随后溢出-y：滚动被覆盖。

如何使父元素垂直滚动，同时还允许子元素离开？

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="game.css" rel="stylesheet" type="text/css">

<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body id="body">

<div id="gallery">

    <div id="container1">
<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/Balance.png" alt=""/>
</div>
</div>

<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/happy.png" alt=""/>
</div>

<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/hope.png" alt=""/>
</div>  

<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/laughing.png" alt=""/>
</div>

<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/searchin.png" alt=""/>
</div>

<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/spontaneous.png" alt=""/>
</div>

<div class="stickers">
<img class="imgscaleadjust" src="Images/Stickers/xray.png" alt=""/>
</div>

</div>
</div>

CSS

@charset "UTF-8";

#body {
max-width: 100%;
}

.imgscaleadjust {
width: 100%;
height: auto;
}

#container1 {
width: 100%;
overflow-y: scroll;

}

#gallery {
background-color: #DF4548;
width: 20%;
height: 90%;
overflow: visible;
}

JAVASCRIPT

<!RESIZABLE>

<script>
$( function() {
$( ".stickers" ).resizable();
} );
</script>



<!DRAGGABLE>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".stickers" ).draggable();
} );

</script>

如何使可拖动元素离开滚动父级

0 个答案: