Question

我想知道如何将可拖动的dom节点的移动限制为仅上下移动，理想情况下，还限制它可以拖动的最大距离。纯javascript答案请。

我希望有一些方法可以与原生的可拖动内容进行交互，而不是使用鼠标事件从头开始实现它。

更新：非常清楚，当我说“限制运动”时，我正在谈论限制被拖动元素的运动。例如，如果单击拖动并尝试对角拖动dom节点，我希望dom节点仅更改其y轴。

Answer 1

如评论所述，只需更新样式元素的顶部但不是左侧属性...

JS

function allowDrop(ev) {
     ev.preventDefault();
 }

 function drag(ev) {
     ev.dataTransfer.setData("Text", ev.target.id);
 }

 function drop(ev) {
     ev.preventDefault();
     var data = ev.dataTransfer.getData("Text");
     var element = document.getElementById(data);

     var style = window.getComputedStyle(element);
     var top = parseInt(style.top.replace("px"));
     var left = parseInt(style.left.replace("px"));

     top += ev.offsetY;
     left += ev.offsetX;

     element.style.top = top + "px";
     //No X-axis movement...
     //element.style.left = left + "px";
 }

CSS

#drag1
{
    background-color: black;
    height:69px;
    width:30px;
    position:absolute;
    top:0px;
    left:0px;
}

#div1
{
    position:fixed;
    height:300px;
    width: 300px;
    border: 1px red;
    background-color: green;
}

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" style="border:1px solid yellow" ondragstart="drag(event)">
</div>

Answer 2

我真的想用本机拖动事件来做这件事，但它开始看起来像是不可能的。回到鼠标事件，以下是我正在寻找的东西的一个例子：

<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>

只在纯JavaScript中上下拖动

2 个答案: