I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly.
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function() {
Draggable.get('.slide').applyBounds("#container");
});#container {
display: block;
position: relative;
height: 200px;
width: 70%;
border: solid 1px red;
}
.slide {
display: block;
position: absolute;
height: 20px;
width: 20px;
background: red;
}
.green {
background: green;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script type="text/javascript" src="grabbb.js"></script>
<link rel="stylesheet" href="grabb.css">
<!-- <script type="text/javascript">
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function(){
Draggable.get('.slide').applyBounds("#container");
});
</script> -->
</head>
<body>
<div id="container">
<div class="slide one"></div>
</div>
<button>Change bounds</button>
</body>
</html>The draggable item is not moving at all. I need help in identifying the error. Thank you.
Here are the console errors:
Uncaught TypeError: Cannot read property 'applyBounds' of undefined at grabbable.html:20 at dispatch (jquery.min.js:2) at y.handle (jquery.min.js:2)