Проблемы с элементом «контейнер» в горизонтально перетаскиваемой галерее изображений - PullRequest
Новая
       35

Проблемы с элементом «контейнер» в горизонтально перетаскиваемой галерее изображений

0 голосов
/ 07 июня 2019

Я пытаюсь создать галерею изображений с навигацией по горизонтали. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что слева и справа нет границ, когда элементы должны перестать перетаскивать. Я пытался использовать элемент «контейнер», но когда я это делаю, он вообще перестает перетаскивать.

Я пытался использовать 'parent' или фактический div в качестве контейнера, и ни один из них не работал должным образом. На другой доске объявлений я видел, что использование flexbox в этой ситуации усложняет ситуацию, поэтому я переключился на использование display: inline-block на изображениях.

Это мой текущий черновик: https://jsfiddle.net/samseurynck/ka1e9soj/21/

HTML 

<div class="item_block_left">
  <div class="item_block_left_gallery_container">
    <div class="item_block_left_gallery">
        <img class="item_block_left_gallery_item" src="https://placeimg.com/640/480/animals">
        <img class="item_block_left_gallery_item" src="https://placeimg.com/200/200/animals">
        <img class="item_block_left_gallery_item" src="https://placeimg.com/640/400/animals">
    </div>
  </div>
</div>

SCSS 

.item_block_left{
  height:200px; 
  width: 50%;
  border: 1px solid pink;
  overflow: hidden;
  .item_block_left_gallery_container{
    position: relative;
    height:100%;
    width: auto;
    .item_block_left_gallery{
      height:100%;
      display: flex;
      cursor: grab;
      .item_block_left_gallery_item{
        position: relative;
        height:100%;
        width:auto;
        display: inline-block;
      }
    }
  }
}

Jquery 

    $(".item_block_left_gallery").draggable({
      scroll: false,
      axis: "x",
  });

Предполагаемый результат - возможность прокручивать / перетаскивать горизонтально только до тех пор, пока изображения не идут, без пробелов слева или справа.

1 Ответ

0 голосов
/ 09 июня 2019

Рабочий пример: https://jsfiddle.net/Twisty/4ak6q0zu/44/

JavaScript 

$(function() {
  var bounds = {
    left: $(".item_block_left_gallery").position().left
  };
  bounds.right = bounds.left - $(".item_block_left_gallery").width() - $(".item_block_left").width() + 10;

  $(".item_block_left_gallery").draggable({
    scroll: false,
    axis: "x",
    drag: function(e, ui) {
      var l = ui.position.left;
      if (l > bounds.left) {
        console.log("Hit Left Boundry");
        ui.position.left = bounds.left;
      }
      if (l <= bounds.right) {
        console.log("Hit Right Boundry");
        ui.position.left = bounds.right;
      }
    }
  });
});

Используя drag обратный вызов, вы можете проверить и установить position перетаскиваемого элемента,Опираясь на левый край элемента перетаскивания, мы можем проверять и ограничивать движение на основе определенных границ.Похоже, что с правой стороны был отступ в 10px или поле, возможно, это просто пробел, поэтому я просто настроился, чтобы исправить это.

См. Также: http://api.jqueryui.com/draggable/#event-drag

Надеюсьэто помогает.

...