拖放元素可以移动 x 但不能移动 y

Drag/drop in element can move by x but not y?

本文关键字：移动 但不能 元素 拖放      更新时间：2023-09-26

所以我正在尝试在javascript中对元素进行拖放。我使用的视频教程在这里;https://www.youtube.com/watch?v=KTlZ4Hs5h80。我已经完全按照它所说的编码了它，我能够移动一个对象，它的 x 值而不是 y 值。所以，总而言之，每当我移动鼠标时，图像的位置都会改变 x，但对于 y 是恒定的，所以我只能左右移动我的图像，而不能上下移动。

这是我的 html 文件：

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <LINK href="gameStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
    <section id="main">
        <img id="bowl" src="images/bowl.gif">
        <img id="egg" src="images/egg.gif">
    </section>
    <script type="text/javascript" src="gameScript2.js">
    </script>
</body>
</html>

这是我的javascript文件：

function eggIntoBowl() 
{
    function Draggable(element, dragStart, dragDrop){
        this.element = element;
        this.dragStart = dragStart;
        this.dragDrop = dragDrop;
        this.element.classList.add('draggable');
        var self = this;
        var move = function(event){
            event.stopPropagation();
            event.preventDefault();
            var originalX = parseInt(window.getComputedStyle(this).left);
            var originalY = parseInt(window.getComputedStyle(this).top);
            var mouseDownX = event.clientX;
            var mouseDownY = event.clientY;
            function dragEgg(event)
            {
                self.element.style.left = originalX + event.clientX - mouseDownX + "px"
                self.element.style.top = originalY + event.clientY - mouseDownY + "py"
                event.stopPropagation();
            }
            function dropEgg(event)
            {
                document.removeEventListener('mousemove', dragEgg, true);
                document.removeEventListener('mouseup', dropEgg, true);
                event.stopPropagation();
            }
            document.addEventListener('mouseup', dropEgg, true);
            document.addEventListener('mousemove', dragEgg, true);
        };

        this.element.addEventListener('mousedown',move,false);
    };
    var egg = document.getElementById('egg');
    var dragObject = new Draggable(egg);
};
window.addEventListener("load", eggIntoBowl, false);

这是我的 CSS：

body{
    width: 896px; 
    height: 652px; 
    background: #fff url(images/eggsToBowlScene.jpg) no-repeat;
}
#egg{
    position:absolute;
    top:190px;
    left:56px;
}
#bowl{
    position:absolute;
    top:141px;
    left:231px;
}
.draggable:hover{
    cursor: move;
}

有什么想法吗？我无法弄清楚我做错了什么。我过去使用过另一个拖放教程，发生了同样的事情，所以我尝试了另一个，因此我猜它与我的 html 文件或 css 有关..？

在dragEgg()方法中，您使用"py"而不是"px"。这并不意味着x和y值，它是"像素"的缩写。浏览器不了解"py"是什么单位，因此它不会移动。将其更改为"px"将告诉浏览器在 Y 轴上偏移多少像素。

self.element.style.top = originalY + event.clientY - mouseDownY + "px";

如果你可以简单地使用 jQuery UI 可拖动的交互，为什么要使用此代码？

http://jqueryui.com/draggable/

相关文章：