Drag-gable item is not moving . How to solve it?

Question

I am trying to implement code from here. I have tried adding necessary files links but still code is not working as expected.It should mover within the bound of container. But

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>

Drag-gable item is not moving anywhere. Please help me finding the error. Thank you.

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)

Here's a start: "Uncaught ReferenceError: Draggable is not defined" — Gerard, Jul 30 '20 at 09:50
my console is not showing any error. The error is being shown in snippet. — Ayes, Jul 30 '20 at 09:51
https://stackoverflow.com/questions/2895894/jquery-ui-draggable-is-not-a-function — s.kuznetsov, Jul 30 '20 at 09:56
You need to use https links in snippets. I've amended that for you and the code now works. Please show an example of the code which displays the behaviour you encounter. — Rory McCrossan, Jul 30 '20 at 09:59

s.kuznetsov · Accepted Answer · 2020-07-30T10:02:19.793

1

To make it work for you, connect these libraries that are on top:

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;
}

<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>
<div id="container">
  <div class="slide one"></div>
  </div>

edited Jul 30 '20 at 10:02

answered Jul 30 '20 at 10:01

s.kuznetsov

14,870
3
10
25

1

Oh, good. Just now read your comment about what was corrected. I think that my answer will not hinder others. – s.kuznetsov Jul 30 '20 at 10:04
Thank you. It seems working here but unfortunately its not working when I run it in my local browser. I have tried both external and internal JS but its still stick to the left corner. I have updated code in question too – Ayes Jul 30 '20 at 10:18
1

Try to copy the code from here (from my example) and use it. – s.kuznetsov Jul 30 '20 at 10:28
@Ayes, did you succeed? – s.kuznetsov Jul 30 '20 at 10:47
1

Its working now. Thank you very much. The problem was with the placement and ordering of my JS file links. I had previously added my custom JS file "grabbb.js" inside which were causing problem. Then I tried adding it at the bottom;in the end of body, just before the closing tag of body . And it worked. Thanks again. – Ayes Jul 30 '20 at 12:37
Can someone explain why custom js link and internal js code were causing problem inside tag?? as it would help me clarifying my concept. – Ayes Jul 30 '20 at 12:43

Drag-gable item is not moving . How to solve it?

1 Answers1