3

I'm working on a button for my electron app that let you to control the media, i have made the backend but for frontend i want to be able drag the button in order to control the media.

this is how far i did that:

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>

I have used animejs but this is just for up and down, i don't really know how to do that for left and right, i want to be able to drag that button to all four directions.

how can i do that?

3 Answers3

0

You can import jquery.ui.js which has the all the functionalities related to DOM and calling $("").draggable() would do the function for you.

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>
sachin
  • 777
  • 5
  • 10
0

I was able to do this by essentially just copying the code you had for up and down and changing the variables suited for left and right. Hope this works for you:

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>
John
  • 5,132
  • 1
  • 6
  • 17
0

First of all i want to thank you all for your response to this question.

I solved this problem by mixing John answer and this answer.

First we should determine if the mouse is moving in X direction or Y direction, and base on that we will change the way button moves.

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>