可拖动的项目没有移动。如何解决？

Question

我正在尝试实现来自 here 的代码。我已经尝试添加必要的文件链接，但代码仍然无法正常工作，因为 expected.It 应该在容器范围内移动。但是

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>

可拖动的项目没有移动到任何地方。请帮我找出错误。谢谢。

控制台错误：

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)

Answer 1

要使其适合您，请连接这些位于顶部的库：

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>

可拖动的项目没有移动。如何解决？

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

html

javascript

css

jquery

jquery-ui-draggable