Значок не перемещается вверх и вниз при перетаскивании - PullRequest
Новая
       9

Значок не перемещается вверх и вниз при перетаскивании

2 голосов
/ 03 августа 2020

Я создал div, чтобы ограничить перетаскиваемую область внутри div. Основная проблема заключается в том, что когда значок перемещается вверх и вниз в области, область не прокручивается вместе со значком, но значок скрывается там, где заканчивается экран. Я видел много руководств по этому поводу, но до сих пор не могу решить эту проблему. Я не уверен, возможно ли это. пожалуйста, помогите мне решить эту проблему. Спасибо. 

var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();

Draggable.create('.slide', {
  bounds: $('#grabbable-area') 
});

$(window).resize(function(){  
  Draggable.get('.slide').applyBounds("#grabbable-area");
});
#grabbable-area{
  display: block;
  position: relative;
  min-height: 1000px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border: solid 1px red;
  background: grey;
}

.slide{
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
  background: red; 

}

.green{
    cursor: pointer; /* fallback if grab cursor is unsupported */
    cursor: pointer;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Drag</title>
  </head>
  <body>

 
<div id="grabbable-area">
  <div class="slide one green"></div>
  </div>
   <link rel="stylesheet" href="grabb.css">

  <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> <!-- //don't move it from here for proper grabbing -->


  </body>

</html>

1 Ответ

0 голосов
/ 03 августа 2020

Передайте autoScroll:1 в параметрах Draggable.create (), это заставит окно автоматически прокручиваться для настройки перетаскиваемого элемента в представлении

Подробнее о autoScroll 

var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();

Draggable.create('.slide', {
  bounds: $('#grabbable-area'),
  autoScroll: 1
  // ^----------------add this, use bigger number instead of 1 for faster "catch-up"
});

$(window).resize(function(){  
  Draggable.get('.slide').applyBounds("#grabbable-area");
});
#grabbable-area{
  display: block;
  position: relative;
  min-height: 1000px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border: solid 1px red;
  background: grey;
}

.slide{
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
  background: red; 

}

.green{
    cursor: pointer; /* fallback if grab cursor is unsupported */
    cursor: pointer;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Drag</title>
  </head>
  <body>

 
<div id="grabbable-area">
  <div class="slide one green"></div>
  </div>
   <link rel="stylesheet" href="grabb.css">

  <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> <!-- //don't move it from here for proper grabbing -->


  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...