Javascript 使元素可拖动

我正在做一个比较滑块，我有一些问题。我想让手柄可以拖动，而不是在mousemove上移动。我试图更新一个可拖动的句柄，但似乎无法使其正常工作。我不想为此使用jQuery UI，非常感谢您的帮助。以下是脚本：

document.addEventListener（'DOMContentLoaded'，function（）{
var parent=document.querySelector（'.splitview'），
topPanel=parent.querySelector（'.top'），
handle=parent.querySelector（'.handle'），
skewHack=0，
δ=0；
//如果父类具有.skewed类，则设置skewHack变量。
if（parent.className.indexOf（'skewed'）！=-1）{
skewHack=1000；
}
parent.addEventListener（'mousemove'，函数（事件）{
//获取鼠标位置和中心点之间的增量。
增量=（event.clientX-window.innerWidth/2）*0.5；
//移动手柄。
handle.style.left=event.clientX+delta+'px'；
//调整顶部面板的宽度。
topPanel.style.width=event.clientX+skewHack+delta+px'；
});
});
/*面板*/
.splitview{
位置：相对位置；
宽度：100%；
最小高度：45vw；
溢出：隐藏；
}
.小组{
位置：绝对位置；
宽度：100vw；
最小高度：45vw；
溢出：隐藏；
}
.小组.内容{
位置：绝对位置；
宽度：100vw；
最小高度：45vw；
颜色：#FFF；
}
.panel.top.说明{
转化：translateY（-50%）；
}
.panel.bottom.description{
转化：translateY（-50%）；
}
.小组.说明{
宽度：25%；
位置：绝对位置；
最高：50%；
文本对齐：居中；
z指数：999；
}
.面板.说明h1{
页边距底部：0；
字体大小：60px；
线高：.9；
}
.面板.说明ul{
文本对齐：左对齐；
左边距：4.5em；
}
.面板.说明ul li{
列表样式：光盘；
字体大小：20px；
}
.panel.说明h1、.panel.说明p、.panel.说明ul{
颜色：#fff；
}
.仪表盘img{
盒影：0 0 20px 20px rgba（0,0,0,0.15）；
宽度：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：1；
滤光片：亮度（0.3）；
过渡：0.2秒；
}
.面板img：悬停{
滤光片：亮度（0.6）；
}
.面板.说明img{
位置：相对位置；
排名：0；
宽度：60%；
转化：无；
左：0；
盒影：0.20px 7px rgba（0,0,0,0.15）；
边缘底部：1米；
显示：内联块；
滤光片：亮度（1）；
}
.底部{
背景颜色：灰色；
z指数：1；
}
.bottom.说明{
右：10%；
}
.顶{
背景颜色：绿色；
z指数：2；
宽度：50vw；
}
.顶部.说明{
左：10%；
}
/*处理*/
.处理{
身高：100%；
位置：绝对位置；
显示：块；
背景色：#fff；
宽度：5px；
排名：0；
左：50%；
z指数：3；
}
/*歪斜的*/
.歪斜.把手{
最高：50%；
转化：translateY（-50%）；
身高：200%；
-webkit转换原点：顶部；
-moz变换原点：top；
变换原点：顶部；
}
.歪斜的.顶部{
左边距：-1000px；
宽度：计算（50vw+1000px）；
}
.倾斜.顶部.内容{
左边距：1000px；
}

我提供了这个极其蹩脚的帮助——你将不得不为此付出很多努力。但是：难道你不能只检查mousedown状态，并可能将鼠标移到元素状态（此处未显示）上，然后检查，如果两者都不正确，
从mousemove函数中返回

这是一个相当糟糕的版本。主要的问题是区分mouseup和click，但您会看到，如果最初将鼠标悬停在上方，您将无法移动，然后单击mousedown，您将看到

var mousedown = false;
parent.addEventListener('mousedown', function(event) {
  mousedown = true;
});
parent.addEventListener('mouseup', function(event) {
  mousedown = false;
});  

parent.addEventListener('mousemove', function(event) {
   if(!mousedown) return; 

 ... your code ...

无论如何，这不算多，但也许只是一个开始。祝你好运

代码笔：
这可以帮助您。这是devider的代码。
任何您不使用标准方法的原因谢谢，我会看一看。我感谢您的反馈，我会看看我能从这里做些什么