JQuery выпавшие элементы следуют за горизонтальной прокруткой - PullRequest
Новая
       3

JQuery выпавшие элементы следуют за горизонтальной прокруткой

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

У меня проблема с JQuery Перетаскиванием и горизонтальным меню прокрутки. Я не совсем уверен, возможно ли выполнить это требование, используя JQuery, или в моем коде что-то не так.

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

Все работает нормально, но когда в области сбрасывания уже есть какой-либо символ, и пользователь должен использовать прокрутку меню (для поиска другого символа), отброшенный символ перемещается вместе с меню, как будто он был все еще частью меню.

Как я могу решить эту проблему? 

//Horizontal scroll
var state = 0;
var maxState = 14;

$('#lefty').click(function() {
  if (state == 0) {
    state = maxState;
  } else {
    state--;
  }
  $('#home .scroll_carrossel .nav-container').animate({
    marginLeft: (15 - state * 35) + 'px'
  }, 400);
});

$('#righty').click(function() {
  if (state == maxState) {
    state = 0;
  } else {
    state++;
  }
  $('#home .scroll_carrossel .nav-container').animate({
    marginLeft: (15 - state * 35) + 'px'
  }, 400);
});

//Drag and Drop
$('#home .scroll_carrossel .nav-container .person').draggable({
  distance: 0
});

$('#home .droppable').droppable({
  accept: '.person',
  tolerance: 'intersect',
  over: function(event, ui) {
    $('.person.ui-draggable-dragging').removeClass('backing').addClass('dropping').css("z-index", 10);
  },
  out: function(event, ui) {
    $('.person.ui-draggable-dragging').removeClass('dropping').addClass('backing');
  },
  drop: function(event, ui) {
    $('.personBtn.ui-draggable-dragging').addClass('dropping').css("z-index", 0);
  }
});
#home .droppable {
  position: absolute;
  width: 846px;
  height: 400px;
  top: 27px;
}

#home .scroll_carrossel {
  width: 100%;
  height: 60px;
  background-color: #FFF;
  position: absolute;
  bottom: 15px;
  display: flex;
  overflow: visible;
}

#home .scroll_carrossel .nav-container {
  width: 846px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
}

#home .scroll_carrossel .nav-container .person {
  position: absolute;
  width: 240px;
  height: 240px;
  margin: 5px;
  display: inline-block;
}


/*For all characters*/

#home .scroll_carrossel .nav-container #obj1.person {
  background-image: url(img/objects/dragon.png);
  transform: scale(0.21);
  transform-origin: top left;
  top: 0;
  left: 0;
}

#home #lefty,
#home #righty {
  display: flex;
  position: absolute;
  bottom: 15px;
  z-index: 999;
  width: 31px;
  height: 60px;
  background-image: url(img/controls/scroll-btn.png);
}

#home #lefty {
  float: left;
}

#home #righty {
  left: 259px;
  transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<section id='home'>
  <div class="droppable" id="dropped"></div>
  <div id="lefty"></div>
  <div class='scroll_carrossel'>
    <div class="nav-container">
      <div class="person" id="obj1"></div>
      <div class="person" id="obj2"></div>
      <div class="person" id="obj3"></div>
      <div class="person" id="obj4"></div>
      <div class="person" id="obj5"></div>
      <div class="person" id="obj6"></div>
      <div class="person" id="obj7"></div>
      <div class="person" id="obj8"></div>
      <div class="person" id="obj9"></div>
      <div class="person" id="obj10"></div>
      <div class="person" id="obj11"></div>
      <div class="person" id="obj12"></div>
      <div class="person" id="obj13"></div>
      <div class="person" id="obj14"></div>
    </div>
  </div>
  <div id="righty"></div>
</section>
...