所以我正在尝试在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/