只能在纯javascript中上下拖动_Javascript_Html_Drag And Drop

只能在纯javascript中上下拖动

javascript html

只能在纯javascript中上下拖动,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我想知道如何将可拖动dom节点的移动限制为只能上下移动，理想情况下，还要限制它可以拖动的最大距离。请回答纯javascript 我希望有一些方法可以与本地可拖动的东西交互，而不是使用鼠标事件从头开始实现它更新：非常清楚，当我说“限制移动”时，我指的是限制被拖动元素的移动。例如，如果单击拖动并尝试沿对角线拖动dom节点，我希望dom节点仅更改其y轴。如注释所示，只需更新style元素的top而不是eh left属性即可 JS CSS HTML 我真的很想用本机拖动事件来实现这一点，但它开始看起来

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

我希望有一些方法可以与本地可拖动的东西交互，而不是使用鼠标事件从头开始实现它

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

如注释所示，只需更新style元素的top而不是eh left属性即可

CSS

HTML

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

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


驼鹿
猫
穆萨洛
猛敲
长柄
吉布斯
var x=document.getElementById（'a'）
对于（var n=0；对ondragend来说没有什么想象力……相对位置只会改变样式。现在我们有了进展，这是一个好主意。ondragend不会是那个tho的地方，因为我想在你拖动的时候限制它，而不仅仅是在末端。@Cheruvian你能给出一个答案吗，这样我们就不会在主评论线程中讨论这个问题了？还有，你的想法行不通，而且本地可拖动功能似乎不允许在运行中修改元素，因此我几乎肯定必须从头开始实现它。请下次再努力理解你回答的问题。a.这在firefox中不起作用，B.这在Chrome中不起作用（例如，无法将其向上移动）。C.由于在我的原始问题中，我希望能够影响正在拖动的对象（即目标元素的不透明副本）的移动，因此我需要某种方法来关闭不透明副本并移动目标元素。我将如何做到这一点？目前，这个答案无法回答我的问题。
#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;
}

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

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