B T*_*B T 5 html javascript drag-and-drop
我想知道如何将可拖动 dom 节点的移动限制为仅向上和向下，并且理想情况下，还限制它可以拖动的最大距离。请纯 JavaScript 回答。
我希望有某种方法可以与本机可拖动的东西进行交互，而不是使用鼠标事件从头开始实现它。
更新：要完全清楚，当我说“限制移动”时，我指的是限制被拖动元素的移动。例如，如果您单击拖动并尝试对角拖动 dom 节点，我希望 dom 节点仅更改其 y 轴。
我真的很想用原生拖动事件来做到这一点，但它开始看起来像是不可能的。回到鼠标事件，下面是一个实现我正在寻找的内容的示例：
<body>
<div id='a'>
<div>moose</div>
<div>cat</div>
<div>moosalo</div>
<div>bang</div>
<div>shank</div>
<div>jeebus</div>
</div>
</body>
<style>
</style>
<script>
var x = document.getElementById('a')
for(var n=0; n<x.children.length; n++) {
;(function(c) {
c.addEventListener('mousedown', function(e) {
console.log('dragstart')
this.style.opacity = '.9'
this.style.position = 'relative'
if(c.style.top === "") {
var offsetStart = 0
} else {
var offsetStart = parseInt(c.style.top.slice(0,-2))
}
var mouseStart = e.pageY
var mousemoveHandler;
document.addEventListener('mousemove', mousemoveHandler = function(e) {
//this.style.opacity -= '.01'
c.style.top = offsetStart + e.pageY - mouseStart
console.log('drag: ', e.pageY, mouseStart, c.style.top)
})
document.addEventListener('mouseup', function(e) {
console.log('dragend')
document.removeEventListener('mousemove', mousemoveHandler)
})
})
})(x.children[n])
}
</script>