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

我正在为我的electron应用程序设计一个按钮，它可以让你控制媒体，我已经制作了后端，但对于前端，我希望能够拖动按钮来控制媒体

这就是我所做的：

var className=“.media controller”；
var-mousePos=0；
var currentPos=0；
var位置=0；
var draggable=false；
var偏移=100；
var-dur=1000；
动画；
$（document）.on（'mousedown'，className，function（））{
currentPos=鼠标点；
draggable=true；
blockAnime.pause（）；
})
$（文档）.on（“mousemove”，函数（事件）{
mousePos=event.pageY；
如果（可拖动）{
位置=鼠标点-当前位置；
$（className）.css（'transform'，'translateY（'+position/2+'px'）；
}
如果（位置=偏移量和可拖动）{
中心（）；
}
})
$（文档）.on（“mouseup”，函数（事件）{
可拖动（&C）（）；
})
功能中心（）{
可拖动=错误；
区块动画({
目标：类名，
持续时间：dur，
translateY:0，
})
}
中心（）

.media控制器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
边界半径：0.25vw；
颜色：白色；
背景色：rgba（0,0,0,0.3）；
右边距：10px；
填充：20px 50px；
文本对齐：居中；
字体大小：6px；
保证金：自动；
边缘顶部：100px；
宽度：20%；
用户选择：无；
}
.底部{
位置：绝对位置；
底部：2px；
左：0；
右：0；
}
.顶{
位置：绝对位置；
顶部：2个；
左：0；
右：0；
}
.左{
位置：绝对位置；
最高：50%；
左：4px；
转化：translateY（-50%）；
}
.对{
位置：绝对位置；
最高：50%；
右：4px；
转化：translateY（-50%）；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：10px；
}

---

您可以导入jquery.ui.js，它具有与DOM相关的所有功能，并调用$（“”）。draggable（）将为您完成该功能

var className=“.media controller”；
var-mousePos=0；
var currentPos=0；
var位置=0；
var draggable=false；
var偏移=100；
var-dur=1000；
动画；
$（“.media controller”）.draggable（）
.media控制器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
边界半径：0.25vw；
颜色：白色；
背景色：rgba（0,0,0,0.3）；
右边距：10px；
填充：20px 50px；
文本对齐：居中；
字体大小：6px；
保证金：自动；
边缘顶部：100px；
宽度：20%；
用户选择：无；
}
.底部{
位置：绝对位置；
底部：2px；
左：0；
右：0；
}
.顶{
位置：绝对位置；
顶部：2个；
左：0；
右：0；
}
.左{
位置：绝对位置；
最高：50%；
左：4px；
转化：translateY（-50%）；
}
.对{
位置：绝对位置；
最高：50%；
右：4px；
转化：translateY（-50%）；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：10px；
}
我能够做到这一点，基本上只是复制上下的代码，并更改适合左右的变量。希望这对你有用：


var className=“.media controller”；
var-mousePos=0；
var mousePos1=0；
var currentPos=0；
var currentPos1=0；
var位置=0；
变量1=0；
var draggable=false；
var draggable1=假；
var偏移=100；
var-dur=1000；
动画；
$（document）.on（'mousedown'，className，function（））{
currentPos=鼠标点；
draggable=true；
blockAnime.pause（）；
})
$（文档）.on（“mousemove”，函数（事件）{
mousePos=event.pageX；
如果（可拖动）{
位置=鼠标点-当前位置；
$（className）.css（'transform'，'translateX（'+position/2+'px'）；
}
如果（位置=偏移量和可拖动）{
中心（）；
}
})
$（文档）.on（“mouseup”，函数（事件）{
可拖动（&C）（）；
})
功能中心（）{
可拖动=错误；
区块动画({
目标：类名，
持续时间：dur，
translateX:0，
})
}
中心（）
$（document）.on（'mousedown'，className，function（））{
currentPos1=鼠标点1；
draggable1=真；
blockAnime.pause（）；
})
$（文档）.on（“mousemove”，函数（事件）{
mousePos1=event.pageY；
如果（可拖动1）{
位置1=鼠标点1-当前位置1；
$（className）.css（'transform'，'translateY（'+position1/2+'px'）；
}
如果（位置1=偏移量和拖动能力1）{
中心1（）；
}
})
$（文档）.on（“mouseup”，函数（事件）{
draggable1&¢er1（）；
})
函数中心1（）{
draggable1=假；
区块动画({
目标：类名，
持续时间：dur，
translateY:0，
})
}
center1（）
.media控制器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
边界半径：0.25vw；
颜色：白色；
背景色：rgba（0,0,0,0.3）；
右边距：10px；
填充：20px 50px；
文本对齐：居中；
字体大小：6px；
保证金：自动；
边缘顶部：100px；
宽度：20%；
用户选择：无；
}
.底部{
位置：绝对位置；
底部：2px；
左：0；
右：0；
}
.顶{
位置：绝对位置；
顶部：2个；
左：0；
右：0；
}
.左{
位置：绝对位置；
最高：50%；
左：4px；
转化：translateY（-50%）；
}
.对{
位置：绝对位置；
最高：50%；
右：4px；
转化：translateY（-50%）；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：10px；
}
首先，我要感谢大家对这个问题的回答

我把答案和答案混合起来解决了这个问题

首先，我们应该确定鼠标是在X方向还是Y方向移动，并在此基础上更改按钮的移动方式


var className=“.media controller”；
var-mousePos=0；
var currentPos=0；
var位置=0；
var draggabl