當使用 jQueryUI 單擊滑鼠時，我可以在容器周圍拖動元素。我也想移動整個容器，但是當我引入可拖動物件時，第一個效果停止作業。
這是第一個效果作業（當你單擊滑鼠并拖動一點時它作業），一旦我用 jQueryUI 引入可拖動，我只有可拖動效果作業。
有沒有辦法讓這兩種效果同時發揮作用？
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 class="container">
<h2 class="object" data-value="3">Space<br><span>Background</span></h2>
<img src="https://i.imgur.com/5yrwyPE.png" class="object" data-value="-2" alt="">
<img src="https://i.imgur.com/C688O6f.png" class="object" data-value="2" alt="">
<img src="https://i.imgur.com/zQMI9zR.png" class="object" data-value="1" alt="">
<img src="https://i.imgur.com/JSzKUzo.png" class="object" data-value="-3" alt="">
<img src="https://i.imgur.com/dxgHvQV.png" class="object" data-value="3" alt="">
<img src="https://i.imgur.com/kbNROja.png" class="object" data-value="-2" alt="">
<img src="https://i.imgur.com/2Ud0NwP.png" class="object" data-value="1" alt="">
<img src="https://i.imgur.com/c5BGOj2.png" class="object" data-value="-3" alt="">
<img src="https://i.imgur.com/Qxs8luV.png" class="object" data-value="0" alt="">
</div>
</div>uj5u.com熱心網友回復：
聽起來您已經有了答案，您可以考慮以下內容。
$(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 class="container">
<h2 class="object" data-value="3">Space<br><span>Background</span></h2>
<img src="https://i.imgur.com/5yrwyPE.png" class="object" data-value="-2" alt="">
<img src="https://i.imgur.com/C688O6f.png" class="object" data-value="2" alt="">
<img src="https://i.imgur.com/zQMI9zR.png" class="object" data-value="1" alt="">
<img src="https://i.imgur.com/JSzKUzo.png" class="object" data-value="-3" alt="">
<img src="https://i.imgur.com/dxgHvQV.png" class="object" data-value="3" alt="">
<img src="https://i.imgur.com/kbNROja.png" class="object" data-value="-2" alt="">
<img src="https://i.imgur.com/2Ud0NwP.png" class="object" data-value="1" alt="">
<img src="https://i.imgur.com/c5BGOj2.png" class="object" data-value="-3" alt="">
<img src="https://i.imgur.com/Qxs8luV.png" class="object" data-value="0" alt="">
</div>
</div>這利用了drag回呼，該回呼僅在拖動元素時執行（mousedown 和 mousemove）。
uj5u.com熱心網友回復：
好吧，我剛剛注意到我的代碼確實有效，只是第一個效果不夠激烈，以至于當第二個效果開始時不會被注意到，哈哈。
還是有一些問題，比如第二次點擊拖拽的時候，是從上一個位置開始的……
無論如何，如果有人需要這個，只需增加data-value上的數字，你就會得到它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430893.html