logo标签列表

如何将元素拖动到上、下、右、左方向？

javascripthtmlcss
3

我正在为我的Electron应用程序设计一个按钮，可以控制媒体播放。我已经制作了后端代码，但是前端我希望能够拖动按钮以控制媒体。

目前为止，这是我所完成的内容:

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，但这只能让按钮上下移动，我不知道如何使其左右移动，我想要能够将按钮拖动到四个方向。

我该怎么做？

3个回答
0
你可以导入jquery.ui.js文件，其中包含与DOM相关的所有功能，并调用$("").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>

0
我能够做到这一点，基本上只需复制您的上下代码，并更改适用于左右的变量。希望这对您有用： 

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>

0

首先，我想感谢大家对这个问题的回应。

我通过结合John的答案和this的答案解决了这个问题。

首先，我们应该确定鼠标是在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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接