Как определить, когда перетаскиваемые объекты попадают в верх или низ содержимого в пользовательском интерфейсе jQuery - PullRequest
Новая
       2

Как определить, когда перетаскиваемые объекты попадают в верх или низ содержимого в пользовательском интерфейсе jQuery

1 голос
/ 14 марта 2020

Не могли бы вы взглянуть на эту демонстрацию и дать мне знать, как определить, когда .draggable достигнет верха и низа ее содержания? 

$(function(){
    var draggableRight;
    var draggableWidth = $('.draggable').height();
    var parentWidth = $('#parent').height();
    $('.draggable').draggable({
        containment: 'parent',
        axis: "y",
        drag: function(e, ui){
         // ==> if .draggable hits top of parent change it's background red
              //  $(document).trigger("mouseup");
              //  $('.draggable').css({ background: 'red' });
         // ==> if .draggable hits bottom of parent  change it's background blue
              //  $(document).trigger("mouseup");
              //  $('.draggable').css({ background: 'blue' });
        } 
    }); 
});
#parent {
    background: khaki;
    width: 400px;
    height: 200px;
    position: relative;
    margin:20px;
    padding:0px;
}
.draggable {
    background: #fff;
    width: 400px;
    height: 50px;
    margin:0px;
      background: red;
}
  <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>
  <div id="parent">
    <div class="draggable"></div>
  </div>

1 Ответ

0 голосов
/ 31 марта 2020

Вы хотите использовать position или offset из объекта пользовательского интерфейса.

Примите во внимание следующее: 

$(function() {
  var draggableRight;
  var draggableWidth = $('.draggable').height();
  var parentWidth = $('#parent').height();
  $('.draggable').draggable({
    containment: 'parent',
    axis: "y",
    drag: function(e, ui) {
      var p = {
        top: ui.offset.top - $("#parent").offset().top,
        bottom: (ui.offset.top - $("#parent").offset().top) + $(this).height()
      };
      $("#log").html(p.top + ", " + p.bottom);
      if (p.top == 0) {
        console.log("Hit Top");
      }
      if (p.bottom == $("#parent").height()) {
        console.log("Hit Bottom");
      }
    }
  });
});
#parent {
  background: khaki;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 20px;
  padding: 0px;
}

.draggable {
  background: #fff;
  width: 400px;
  height: 50px;
  margin: 0px;
  background: red;
}
<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>
<div id="parent">
  <div class="draggable"></div>
</div>
<div id="log"></div>
...