<html>
<head>
<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>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ css/bootstrap.min.css">
<style type="text/css">
#draggable {
width: 100px;
height: 60px;
padding: 0.5em;
border: 1px solid;
background-color: orange;
}
.box{
width: 50%;
height: auto;
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
body{
padding:20px;
}
</style>
<script>
$(function() {
var thHeight = $("table#demo-table th:first").height();
$("table#demo-table th").resizable({
handles: "e",
minHeight: thHeight,
maxHeight: thHeight,
minWidth: 40,
resize: function (event, ui) {
var sizerID = "#" + $(event.target).attr("id") + "-sizer";
$(sizerID).width(ui.size.width);
}
});
});
$( function() {
$( "#draggable" ).draggable({ axis: "x" });
$( "#draggable" ).draggable({ containment: "parent" });
} );
</script>
</head>
<body>
<div class="box">
<div id="draggable" class="ui-widget-content">
<span>Draggable Box</span>
</div>
</div>
</body>
</html>
Output:
