要素を上、下、右、左の方向にドラッグする方法は？

Question

私はあなたがメディアを制御できるようにする私のエレクトロンアプリのボタンに取り組んでいます、私はバックエンドを作りました、しかしフロントエンドのために私はメディアを制御するためにボタンをドラッグできるようにしたいです。

これは私がそれをどこまで行ったかです：

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>

私はanimejsを使用しましたが、これは上下だけです。左右にそれを行う方法がよくわかりません。そのボタンを4方向すべてにドラッグできるようにしたいと思います。

どうやってやるの？

Answer 1

基本的に、上下に使用するコードをコピーし、左右に適した変数を変更するだけで、これを行うことができました。これがあなたのために働くことを願っています：

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>

Answer 2

DOMに関連するすべての機能を備えたjquery.ui.jsをインポートでき、$（ ""）。draggable（）を呼び出すとその機能が実行されます。

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>

Answer 3

まず第一に、この質問への回答に感謝したいと思います。

私はジョンの答えとこの答えを混ぜることによってこの問題を解決しました。

まず、マウスがX方向とY方向のどちらに移動しているかを判断し、それに基づいてボタンの移動方法を変更する必要があります。

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>