Menu
I’ve got a parent DIV (say 1000px wide). Inside this I have a child DIV which has a child table (say 1500px wide)
Overflow-y scroll.
How can I make it so if I click and drag the table, I can move it without using the scroll bar?
Any CSS, vanilla JS or last resort jQuery type options?
``<i>
</i><!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Testseite</title>
<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>
<div id="window" style="width: 250px; height: 250px; overflow: hidden; position: relative; margin: auto">
<div id="wrapper" style="position: absolute"><img id="draggable"
src="http://ulrichbangert.de/heimat/2013-08-05_Wolfenbuettel_07.jpg"></div>
</div>
<script>
$draggableele = $("#draggable");
$windowele = $("#window");
$draggableele.on('load', event => {
$draggableele.draggable();
wdiff = $draggableele.width() - $windowele.width();
hdiff = $draggableele.height() - $windowele.height();
$("#wrapper").css({
width: $windowele.width() + 2 * wdiff + "px",
height: $windowele.height() + 2 * hdiff + "px",
left: -wdiff + "px",
top: -hdiff + "px"
});
$draggableele.draggable({ containment: "parent" });
})
</script>
</body>
</html><i>
</i>`` $draggableele.on('load', event => {</C><br/>
and the closing <C>})` $draggableele = $("#gamesTableTeamView");<br/>
$windowele = $("#gamesTableTeamView_wrapper");<br/>
$draggableele.on('load', event => {<br/>
$draggableele.draggable();<br/>
wdiff = $draggableele.width() - $windowele.width();<br/>
hdiff = $draggableele.height() - $windowele.height();<br/>
$("#gamesTable").css({<br/>
width: $windowele.width() + 2 * wdiff + "px",<br/>
height: $windowele.height() + 2 * hdiff + "px",<br/>
left: -wdiff + "px",<br/>
top: -hdiff + "px"<br/>
});<br/>
$draggableele.draggable({ containment: "parent" });<br/>
})$draggableele = $("#gamesTableTeamView");
$windowele = $("#gamesTableTeamView_wrapper");
$draggableele.draggable();
wdiff = $draggableele.width() - $windowele.width();
hdiff = $draggableele.height() - $windowele.height();
$("#gamesTable").css({
width: $windowele.width() + 2 * wdiff + "px",
height: $windowele.height() + 2 * hdiff + "px",
left: -wdiff + "px",
top: -hdiff + "px"
});
$draggableele.draggable({ containment: "parent" });``<i>
</i><!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Draggable Table</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.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>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<style>
#window {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
margin: auto
}
#wrapper {
position: absolute;
}
#draggable {
width: 800px;
height: auto;
}
</style>
</head>
<body>
<div id="window">
<div id="wrapper">
<div id="draggable">
<table id="the-table" class="display" cellspacing="0" width="800px">
<!-- table data here -->
</table>
</div>
</div>
</div>
<script>
$draggableele = $("#draggable");
$windowele = $("#window");
$('#the-table').DataTable({ paging: false });
// $draggableele.on('load', event => {
$draggableele.draggable();
wdiff = $draggableele.width() - $windowele.width();
hdiff = $draggableele.height() - $windowele.height();
$("#wrapper").css({
width: $windowele.width() + 2 * wdiff + "px",
height: $windowele.height() + 2 * hdiff + "px",
left: -wdiff + "px",
top: -hdiff + "px"
});
$draggableele.draggable({ containment: "parent" });
// })
</script>
</body>
</html><i>
</i>``>You'll see I have multiple .mytables DIV's.
$('#the-table').DataTable</C>, however the table tag didn't have such id.<br/>
I modified the script a bit and added some CSS. This is working for me now:
<CODE>`<i>
</i><!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Draggable Table</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.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>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<style>
.container {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.mytables {
height: 0;
overflow: hidden;
position: relative;
}
.fullheight {
height: 100% !important;
}
table {
width: 100%;
max-width: 1200px;
margin: 1em auto;
padding: 0;
border-collapse: collapse;
box-sizing: border-box;
white-space: nowrap;
border: solid 1px #000;
cursor: grab;
}
td,
th {
background: #f3f0f0;
font-weight: 200;
padding: 0.4em;
font-size: 0.8em;
border: solid 1px rgb(136 136 136);
white-space: nowrap;
text-align: center;
box-sizing: border-box;
}
</style>
<style>
#window {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
margin: auto
}
#wrapper {
position: absolute;
}
</style>
</head>
<body>
<div class="container" id="window">
<div class="tables" id="wrapper">
<div class="mytables">
</div>
<div class="mytables">
</div>
<div class="mytables fullheight" id="draggable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ID</th>
<th>ID</th>
<th>ID</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>22 22 22 22 22 22 22 22</td>
<td>22 22 22 22 22 22 22 22</td>
<td>22 22 22 22 22 22 22 22</td>
<td>22 22 22 22 22 22 22 22</td>
<td>22 22 22 22 22 22 22 22</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
$draggableele = $("#draggable");
$windowele = $("#window");
$tableele = $('table');
$tableele.DataTable({
paging: false,
initComplete: function (settings, json) {
$draggableele.width($tableele.width());
if ($windowele.height() > $draggableele.height())
$windowele.height($draggableele.height());
$draggableele.draggable({ containment: "parent" });
wdiff = $draggableele.width() - $windowele.width();
if (wdiff < 0) wdiff = 0;
hdiff = $draggableele.height() - $windowele.height();
if (hdiff < 0) hdiff = 0;
$("#wrapper").css({
width: $windowele.width() + 2 * wdiff + "px",
height: $windowele.height() + 2 * hdiff + "px",
left: -wdiff + "px",
top: -hdiff + "px"
});
}
});
</script>
</body>
</html><i>
</i>``0.1.9 — BETA 4.18