Слайд справа налево без изменения положения - PullRequest
Новая
       29

Слайд справа налево без изменения положения

0 голосов
/ 07 февраля 2019

Доброе утро всем!У меня есть проект Codepen здесь .Нажав на темно-красную кнопку, я должен показать / скрыть div золотых деталей.Как можно избежать изменения положения оранжевого элемента div после анимации слайдов?Другими словами, я хотел бы сохранить перетаскиваемость и открыть золотой div слева от оранжевого div, который всегда должен сохранять свою позицию.

Это код, который я использую: 

$(function() {
  //limit draggability of element to container
  $(".element").draggable({
    containment: document.getElementsByClassName("container")[0],
    handle: document.getElementsByClassName("elHeader")[0]
  });
});

// show details on button click
$(function() {
  $(".expand").on("click", function() {
    $(".elBody").toggle("slide", {
      direction: "right",
      distance: 200,
      duration: 200
    });
  });
});
body {}

.container {
  width: 95vw;
  height: 95vh;
  margin: 20px;
  background-color: lightyellow;
}

.element {
  width: 300px;
  position: absolute;
  overflow: hidden;
}

.elHeader {
  height: 80px;
  width: 80px;
  background-color: orangered;
  cursor: move;
  float: left;
}

.expand {
  height: 15px;
  width: 15px;
  background-color: darkred;
  cursor: pointer;
}

.elBody {
  background-color: orange;
  /*display: none;*/
  height: 80px;
  width: 200px;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
  <div class="container">
    <div class="element">
      <div class="elBody"></div>
      <div class="elHeader">
        <div class="expand"></div>
      </div>
    </div>
  </div>
</body>
...