Dragging elements with jQueryUI and with parallax effect-CodePudding

I have elements that I can drag around the container when the mouse is clicked using jQueryUI. I'd also like to to move the entire container as well but when I introduce the draggable, the first effect stops working.

Here it is with the first effect working (it works when you click the mouse and drag a bit) and once I introduce draggable with jQueryUI, I only have the draggable effect working.

Is there a way to have both effects working at the same time?

function parallax(e) {
  document.querySelectorAll(".object").forEach(function(move) {
    var moving_value = move.dataset.value;
    var x = (e.clientX * moving_value) / 250;
    var y = (e.clientY * moving_value) / 250;
    move.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });
}

let mousedown = false;

$('body').on({
  mousedown: () => mousedown = true,
  mouseup: () => mousedown = false,
  mouseleave: () => mousedown = false,
  mousemove: e => mousedown && parallax(e)
});

$('.container').draggable({
  scroll: false,
  containment: '#grid'
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", sans-serif;
  background: #666 url(bg.png) no-repeat;
  background-size: cover;
  height: 100vh;
}

#grid {
  position: fixed;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}

.container {
  position: relative;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

.container img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
  pointer-events: none;
}

.container h2 {
  z-index: 1;
  position: relative;
  color: #fff;
  font-size: 90px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 32px;
  line-height: 60px;
}

.container h2 span {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 10px;
}

@media (max-width:800px) {
  .container h2 {
    font-size: 60px;
    letter-spacing: 19px;
    line-height: 35px;
  }
  .container h2 span {
    font-size: 26px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="grid">
  <div >
    <h2  data-value="3">Space<br><span>Background</span></h2>
    <img src="https://i.imgur.com/5yrwyPE.png"  data-value="-2" alt="">
    <img src="https://i.imgur.com/C688O6f.png"  data-value="2" alt="">
    <img src="https://i.imgur.com/zQMI9zR.png"  data-value="1" alt="">
    <img src="https://i.imgur.com/JSzKUzo.png"  data-value="-3" alt="">
    <img src="https://i.imgur.com/dxgHvQV.png"  data-value="3" alt="">
    <img src="https://i.imgur.com/kbNROja.png"  data-value="-2" alt="">
    <img src="https://i.imgur.com/2Ud0NwP.png"  data-value="1" alt="">
    <img src="https://i.imgur.com/c5BGOj2.png"  data-value="-3" alt="">
    <img src="https://i.imgur.com/Qxs8luV.png"  data-value="0" alt="">
  </div>
</div>

CodePudding user response：

Well I just noticed that my code actually works, it's just that the first effect wasn't drastic enough to be noticed when the second one gets going, lol.

There are still some problems with it, such as when you click and drag for the second time, it starts from the previous position...

Anyway, if anyone needs this, just up the numbers on data-value and you'll have it going.

CodePudding user response：

Sounds like you already have your answer and you may consider the following.

$(function() {
  function parallax(e) {
    $(".object").each(function(i, move) {
      var moving_value = move.dataset.value;
      var x = (e.clientX * moving_value) / 250;
      var y = (e.clientY * moving_value) / 250;
      move.style.transform = `translateX(${x}px) translateY(${y}px)`;
    });
  }

  $('.container').draggable({
    scroll: false,
    containment: '#grid',
    drag: function(event, ui) {
      parallax(event);
    }
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", sans-serif;
  background: #666 url(bg.png) no-repeat;
  background-size: cover;
  height: 100vh;
}

#grid {
  position: fixed;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}

.container {
  position: relative;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

.container img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
  pointer-events: none;
}

.container h2 {
  z-index: 1;
  position: relative;
  color: #fff;
  font-size: 90px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 32px;
  line-height: 60px;
}

.container h2 span {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 10px;
}

@media (max-width:800px) {
  .container h2 {
    font-size: 60px;
    letter-spacing: 19px;
    line-height: 35px;
  }
  .container h2 span {
    font-size: 26px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="grid">
  <div >
    <h2  data-value="3">Space<br><span>Background</span></h2>
    <img src="https://i.imgur.com/5yrwyPE.png"  data-value="-2" alt="">
    <img src="https://i.imgur.com/C688O6f.png"  data-value="2" alt="">
    <img src="https://i.imgur.com/zQMI9zR.png"  data-value="1" alt="">
    <img src="https://i.imgur.com/JSzKUzo.png"  data-value="-3" alt="">
    <img src="https://i.imgur.com/dxgHvQV.png"  data-value="3" alt="">
    <img src="https://i.imgur.com/kbNROja.png"  data-value="-2" alt="">
    <img src="https://i.imgur.com/2Ud0NwP.png"  data-value="1" alt="">
    <img src="https://i.imgur.com/c5BGOj2.png"  data-value="-3" alt="">
    <img src="https://i.imgur.com/Qxs8luV.png"  data-value="0" alt="">
  </div>
</div>

This makes use of the drag callback, that is only executed when the element is being dragged (mousedown & mousemove).