本文提供了一个使用JavaScript实现的拖拽元素定位示例。通过鼠标操作，用户可以自由地移动网页上的多个彩色方块，并且能够手动输入坐标来改变它们的位置。此示例展示了基本的事件监听和元素定位技巧。
<html>
<head>
<script language="JavaScript">
var currentobj = null;
function setobj(block){
currentobj = block;
}
function releseobj(block){
if(currentobj = block){
currentobj = null;
}
}
function move(event){
var xx = event.clientX;
var yy = event.clientY;
if(null != currentobj){
currentobj.style.left = (event.clientX-25)+"px";
currentobj.style.top = (event.clientY-25)+"px";
}
}
function change(){
var x = document.c_form.x.value;
var y = document.c_form.y.value;
var block = document.getElementById("block");
block.style.left=x+"px";
block.style.top=y+"px";
}
</script>
</head>
<body onMouseMove="move(event)" >
<form name="c_form">
<input type="text" name="x">
<input type="text" name="y"><br/>
<input type="button" value="改變位置" onclick="change()">
</form>
<div id="block" onMouseUp="releseobj(this)" onMouseDown="setobj(this)" style="height:50px;width:50px;background-color:#FF0000;position:absolute;left:30px;top:80px">
</div>
<div id="block2" onMouseUp="releseobj(this)" onMouseDown="setobj(this)"style="height:50px;width:50px;background-color:#FF00ff;position:absolute;left:30px;top:80px">
</div>
<div id="block3" onMouseUp="releseobj(this)" onMouseDown="setobj(this)" style="height:50px;width:50px;background-color:#FFDDDD;position:absolute;left:30px;top:80px">
</div>
<div id="block4" onMouseUp="releseobj(this)" onMouseDown="setobj(this)"style="height:50px;width:50px;background-color:#ce2020;position:absolute;left:30px;top:80px">
</div>
<div id="block5" onMouseUp="releseobj(this)" onMouseDown="setobj(this)" style="height:50px;width:50px;background-color:#00ff00;position:absolute;left:30px;top:80px">
</div>
<div id="block6" onMouseUp="releseobj(this)" onMouseDown="setobj(this)"style="height:50px;width:50px;background-color:#00ffyf;position:absolute;left:30px;top:80px">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
