요소를 위쪽, 아래쪽, 오른쪽, 왼쪽 방향으로 드래그하는 방법은 무엇입니까?

Nov 23 2020

미디어를 제어 할 수있는 전자 앱의 버튼을 작업 중입니다. 백엔드를 만들었지 만 프런트 엔드의 경우 미디어를 제어하기 위해 버튼을 드래그 할 수 있기를 원합니다.

이것이 내가 얼마나 멀리했는지입니다.

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를 사용했지만 이것은 위아래로만 사용됩니다. 왼쪽과 오른쪽으로 어떻게하는지 모르겠습니다.이 버튼을 네 방향으로 모두 끌 수 있기를 원합니다.

어떻게 할 수 있습니까?

답변

1 John Nov 24 2020 at 05:06

나는 본질적으로 위아래에 대한 코드를 복사하고 왼쪽과 오른쪽에 적합한 변수를 변경함으로써 이것을 할 수있었습니다. 이것이 당신을 위해 작동하기를 바랍니다.

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

DOM과 관련된 모든 기능이있는 jquery.ui.js를 가져올 수 있으며 $ ( ""). draggable ()을 호출하면 해당 기능을 수행 할 수 있습니다.