comment faire glisser un élément vers le haut, le bas, la droite, la gauche?

Nov 23 2020

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

1 John Nov 24 2020 at 05:06

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>

sachin Nov 24 2020 at 04:54

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>

hamidreza Nov 24 2020 at 07:16

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>