I'm trying to have my draggable area constrained to the background (.bg), but once I do that the window is only draggable vertically, despite the background having a width of 100%.
I tried the same with putting the constraint to "body" as well as "parent", all resulting in the same issues.
How would I be able to make my window draggable in all directions?
$( function() {
$( ".draggable" ).draggable({
handle: ".window-titlebar",
scroll: false,
containment: ".bg"
});
} );
/* - - - GENERAL - - - */
body,html {
font-family: Roboto;
font-size: 18px;
height: 100%;
width: 100%;
margin: 0;
}
.bg {
background-image: url("http://abload.de/img/background4mqdx.jpg");
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
/* - - - WINDOWS - - - */
.window {
display: flex;
flex-direction: column;
min-width: 30%;
width: fit-content;
padding: 4px 5px 5px 4px;
height: 70%;
box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
background-color: #C2C5CA;
margin: 0 auto;
}
.window-titlebar {
display: block;
background: linear-gradient(to right, #000080, #0992ec);
position: relative;
width: 100%;
height: 25px;
color: #FFF;
}
.window-titlebar > .tab-icon {
margin-right: 5px;
}
.window-option-bar {
display: block;
position: relative;
width: 100%;
height: 18px;
padding: 5px 0px 8px 0px;
}
.window-option {
-webkit-user-select: none;
padding: 2px 5px 2px 5px;
cursor: pointer;
}
.window-option:hover {
box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
}
.window-content {
margin-left: auto;
margin-right: auto;
display: block;
width: calc(98.5% - 7px);
height: 100%;
border: 2px solid #C2C5CA;
box-shadow: -1px -1px 0px 0px #000, 1px 1px 0px 0px #FFF;
background-color: #FFF;
overflow: scroll;
padding: 5px;
}
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div >
<!-- Windows -->
<div id="credits-window" >
<div >
<div ></div> credits - Notepad
</div>
<div >
</div>
<div >
hewwo
</div>
</div>
</div>
</body>
CodePudding user response:
I asume this question was solved already, but just in case.
Just add the css property position
with the value absoulte
to the .window
class, and it should work.
$( function() {
$( ".draggable" ).draggable({
handle: ".window-titlebar",
scroll: false,
containment: ".bg"
});
} );
/* - - - GENERAL - - - */
body,html {
font-family: Roboto;
font-size: 18px;
height: 100%;
width: 100%;
margin: 0;
}
.bg {
background-image: url("http://abload.de/img/background4mqdx.jpg");
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
/* - - - WINDOWS - - - */
.window {
position:absolute;
display: flex;
flex-direction: column;
min-width: 30%;
width: fit-content;
padding: 4px 5px 5px 4px;
height: 70%;
box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
background-color: #C2C5CA;
margin: 0 auto;
}
.window-titlebar {
display: block;
background: linear-gradient(to right, #000080, #0992ec);
position: relative;
width: 100%;
height: 25px;
color: #FFF;
}
.window-titlebar > .tab-icon {
margin-right: 5px;
}
.window-option-bar {
display: block;
position: relative;
width: 100%;
height: 18px;
padding: 5px 0px 8px 0px;
}
.window-option {
-webkit-user-select: none;
padding: 2px 5px 2px 5px;
cursor: pointer;
}
.window-option:hover {
box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
}
.window-content {
margin-left: auto;
margin-right: auto;
display: block;
width: calc(98.5% - 7px);
height: 100%;
border: 2px solid #C2C5CA;
box-shadow: -1px -1px 0px 0px #000, 1px 1px 0px 0px #FFF;
background-color: #FFF;
overflow: scroll;
padding: 5px;
}
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div >
<!-- Windows -->
<div id="credits-window" >
<div >
<div ></div> credits - Notepad
</div>
<div >
</div>
<div >
hewwo
</div>
</div>
</div>
</body>