comment faire glisser un élément vers le haut, le bas, la droite, la gauche?
Je travaille sur un bouton pour mon application électronique qui vous permet de contrôler le média, j'ai créé le backend mais pour le frontend, je veux pouvoir faire glisser le bouton afin de contrôler le média.
voici jusqu'où j'ai fait ça:
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>
J'ai utilisé animejs mais c'est juste pour le haut et le bas, je ne sais pas vraiment comment faire cela pour la gauche et la droite, je veux pouvoir faire glisser ce bouton dans les quatre directions.
Comment puis je faire ça?
Réponses
J'ai pu le faire en copiant essentiellement le code que vous aviez pour le haut et le bas et en modifiant les variables adaptées à gauche et à droite. J'espère que cela fonctionne pour toi:
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>
Vous pouvez importer jquery.ui.js qui a toutes les fonctionnalités liées au DOM et appeler $ (""). Draggable () ferait la fonction pour vous.
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>
Tout d'abord, je tiens à vous remercier tous pour votre réponse à cette question.
J'ai résolu ce problème en mélangeant la réponse de John et cette réponse.
Nous devons d'abord déterminer si la souris se déplace dans la direction X ou dans la direction Y, et sur cette base, nous modifierons la façon dont le bouton se déplace.
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>