¿Cómo arrastrar un elemento hacia arriba, abajo, derecha, izquierda?
Estoy trabajando en un botón para mi aplicación electrónica que le permite controlar los medios, hice el backend pero para el frontend quiero poder arrastrar el botón para controlar los medios.
esto es lo lejos que hice eso:
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>
He usado animejs pero esto es solo para arriba y abajo, realmente no sé cómo hacer eso para izquierda y derecha, quiero poder arrastrar ese botón a las cuatro direcciones.
¿Cómo puedo hacer eso?
Respuestas
Pude hacer esto esencialmente simplemente copiando el código que tenía para arriba y hacia abajo y cambiando las variables adecuadas para izquierda y derecha. Espero que esto funcione para usted:
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>
Puede importar jquery.ui.js que tiene todas las funcionalidades relacionadas con DOM y llamar a $ (""). Draggable () haría la función por usted.
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>
En primer lugar, quiero agradecerles a todos por su respuesta a esta pregunta.
Resolví este problema mezclando la respuesta de John y esta respuesta.
Primero debemos determinar si el mouse se mueve en la dirección X o en la dirección Y, y basándonos en eso cambiaremos la forma en que se mueve el botón.
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>