jak przeciągnąć element w górę, w dół, w prawo, w lewo?
Pracuję nad przyciskiem do mojej aplikacji elektronowej, który pozwala kontrolować media, zrobiłem backend, ale dla frontendu chcę mieć możliwość przeciągnięcia przycisku, aby kontrolować media.
tak daleko to zrobiłem:
var className = ".media-controller";
var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var offset = 100;
var dur = 1000;
var blockAnime;
$(document).on('mousedown', className, function() { currentPos = mousePos; draggable = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
mousePos = event.pageY;
if (draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateY(' + position / 2 + 'px)'); } if (position <= (offset * -1) && draggable) { center(); } if (position >= offset && draggable) { center(); } }) $(document).on("mouseup", function(event) {
draggable && center();
})
function center() {
draggable = false;
blockAnime = anime({
targets: className,
duration: dur,
translateY: 0,
})
}
center()
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 20%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>
Użyłem animejs, ale to jest tylko do góry i do dołu, naprawdę nie wiem, jak to zrobić dla lewej i prawej, chcę móc przeciągnąć ten przycisk we wszystkich czterech kierunkach.
jak mogę to zrobić?
Odpowiedzi
Byłem w stanie to zrobić, po prostu kopiując kod, który miałeś dla w górę iw dół i zmieniając zmienne odpowiednie dla lewej i prawej. Mam nadzieję, że to działa dla Ciebie:
var className = ".media-controller";
var mousePos = 0;
var mousePos1 = 0;
var currentPos = 0;
var currentPos1 = 0;
var position = 0;
var position1 = 0;
var draggable = false;
var draggable1 = false;
var offset = 100;
var dur = 1000;
var blockAnime;
$(document).on('mousedown', className, function() { currentPos = mousePos; draggable = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
mousePos = event.pageX;
if (draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateX(' + position / 2 + 'px)'); } if (position <= (offset * -1) && draggable) { center(); } if (position >= offset && draggable) { center(); } }) $(document).on("mouseup", function(event) {
draggable && center();
})
function center() {
draggable = false;
blockAnime = anime({
targets: className,
duration: dur,
translateX: 0,
})
}
center()
$(document).on('mousedown', className, function() { currentPos1 = mousePos1; draggable1 = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
mousePos1 = event.pageY;
if (draggable1) {
position1 = mousePos1 - currentPos1;
$(className).css('transform', 'translateY(' + position1 / 2 + 'px)'); } if (position1 <= (offset * -1) && draggable1) { center1(); } if (position1 >= offset && draggable1) { center1(); } }) $(document).on("mouseup", function(event) {
draggable1 && center1();
})
function center1() {
draggable1 = false;
blockAnime = anime({
targets: className,
duration: dur,
translateY: 0,
})
}
center1()
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 20%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>
Możesz zaimportować jquery.ui.js, który ma wszystkie funkcje związane z DOM i wywołanie $ (""). Draggable () wykona tę funkcję za Ciebie.
var className = ".media-controller";
var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var offset = 100;
var dur = 1000;
var blockAnime;
$(".media-controller").draggable();
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 20%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<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.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>
Przede wszystkim chciałbym Wam wszystkim podziękować za odpowiedź na to pytanie.
Rozwiązałem ten problem, mieszając odpowiedź Johna i tę odpowiedź.
Najpierw powinniśmy określić, czy mysz porusza się w kierunku X czy Y i na tej podstawie zmienimy sposób poruszania się przycisku.
var className = ".media-controller";
var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var offset = 100;
var dur = 1000;
var blockAnime;
var last_position = {};
$(document).on('mousedown', className, function() { currentPos = mousePos; draggable = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
if (typeof(last_position.x) != 'undefined') {
var deltaX = last_position.x - event.clientX,
deltaY = last_position.y - event.clientY;
// for ------------------ Y ------------------------
if (Math.abs(deltaX) > Math.abs(deltaY)) {
mousePos = event.pageX;
if(draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateX(' + position / 2 + 'px)'); } // left if (position <= (offset * -1) && draggable) { center(); console.log("left"); } // right if (position >= offset && draggable) { center(); console.log("right"); } $('#output').text("X");
}
// for ------------------ Y ------------------------
else if (Math.abs(deltaY) > Math.abs(deltaX)) {
mousePos = event.pageY;
if(draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateY(' + position / 2 + 'px)'); } // top if (position <= (offset * -1) && draggable) { center(); console.log("top"); } // bototm if (position >= offset && draggable) { center(); console.log("bottom"); } $('#output').text("Y");
}
}
last_position = {
x : event.clientX,
y : event.clientY
};
})
$(document).on("mouseup", function(event) {
draggable && center();
})
function center() {
draggable = false;
blockAnime = anime({
targets: className,
duration: dur,
translateX: 0,
translateY: 0
})
}
center()
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 15%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center" id="output">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>