Javascript实现图片位置控制（鼠标拖拽 + 键盘方向键移动）源码分享
实现图片的拖拽和鼠标方向控制位移
HTML文件代码如下(img.html)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片位置调整</title>
<script language="javascript" src="Drag.js"></script>
</head>
<body onkeydown="keyAction(event);" onload="Init();">
<img src="pig.GIF" name="T4" width="160" height="120" id="T4" style="position:absolute; left:10px; top:10px;" onclick="prepareMove(this,event);" onmousedown="beginMove(this,event);"/>
</body>
</html>
JS文件代码如下(Drag.js)：
>
var actionObj = new Array();
var bar;
var isIE,isNS;
function Init()
{
//获取浏览器版本
if(navigator.appName.toLowerCase().indexOf("microsoft") != -1 && navigator.appVersion.indexOf("6.0"))
{
isIE = true;
}
else if(navigator.appName.toLowerCase().indexOf("netscape") != -1 && navigator.appVersion.toLowerCase().indexOf("5.0") != -1)
{
isNS = true;
}
else
{
alert("[Global.js][Init()]请使用IE6.0或FireFox浏览器浏览本页！");
//Glob.isIE = true;
}
if(isIE)
{
document.onmousedown = function(){clearSel();};
}
else if(isNS)
{
document.body.setAttribute("onmousedown","clearSel();");
}
//创建拖动点
bar = document.createElement("div");
bar.id = "bar";
bar.style.width = "20px";
bar.style.height = "20px";
bar.style.position = "absolute";
bar.style.zIndex = 10000;
bar.style.display = "none";
if(isIE)
{
bar.style.backgroundColor = "#ffffff";
bar.style.filter = "alpha(opacity=0)";
}
else if(isNS)
{
bar.style.backgroundImage = "url(../images/alpha.gif)";
}
bar.style.cursor = "move";
document.body.appendChild(bar);
if(isIE)
{
bar.onmousedown = function()
{
beginMove(event);
}
}
if(isNS)
{
bar.setAttribute("onmousedown","beginMove(event)");
}
}
//为键盘移动做准备
function prepareMove(mvObj,e)
{
//清理上一个选中
clearSel();
var obj = mvObj;
obj.style.borderWidth = "1px";
obj.style.borderStyle = "dashed";
obj.style.borderColor = "#666666";
obj.style.left = parseInt(obj.style.left) - 1 + "px";
obj.style.top = parseInt(obj.style.top) - 1 + "px";
actionObj[actionObj.length] = obj;
//设置拖动点
bar.style.display = "block";
bar.style.width = mvObj.style.width == "" ? mvObj.width + "px" : mvObj.style.width;
bar.style.height = mvObj.style.height == "" ? mvObj.height + "px" : mvObj.style.height;
bar.style.left = parseInt(mvObj.style.left) + 1 + "px";
bar.style.top = parseInt(mvObj.style.top) + 1 + "px";
if (e.stopPropagation) e.stopPropagation( );
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault( );
else e.returnValue = false;
}
//为鼠标移动做准备
function beginMove(e)
{
var mvObj = getAc();
if(mvObj == null)return;
var mouseStartX = e.clientX;
var mouseStartY = e.clientY;
mvObj.sLeft = parseInt(mvObj.style.left);
mvObj.sTop = parseInt(mvObj.style.top);
// alert(mvObj.Left);
// alert(mvObj.Top);
if (e.stopPropagation) e.stopPropagation( );
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault( );
else e.returnValue = false;
if (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) {
document.attachEvent("onmousemove", moveHandler);
document.attachEvent("onmouseup", upHandler);
}
function moveHandler()
{
var mouseChangeX = e.clientX - mouseStartX;
var mouseChangeY = e.clientY - mouseStartY;
mvObj.Left = mvObj.sLeft + mouseChangeX;
mvObj.Left = mvObj.Left > 0 ? mvObj.Left : 0;
mvObj.Top = mvObj.sTop + mouseChangeY;
mvObj.Top = mvObj.Top > 0 ? mvObj.Top : 0;
mvObj.style.left = mvObj.Left + "px";
mvObj.style.top = mvObj.Top + "px";
}
function upHandler()
{
if (document.removeEventListener) {
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) {
document.detachEvent("onmouseup", upHandler);
document.detachEvent("onmousemove", moveHandler);
}
bar.style.display = "block";
bar.style.width = mvObj.style.width == "" ? mvObj.width + "px" : mvObj.style.width;
bar.style.height = mvObj.style.height == "" ? mvObj.height + "px" : mvObj.style.height;
bar.style.left = parseInt(mvObj.style.left) + 1 + "px";
bar.style.top = parseInt(mvObj.style.top) + 1 + "px";
}
}
function keyAction(e)
{
var acOp = getAc();
if(acOp == null)return;
switch(e.keyCode)
{
case 37:
acOp.style.left = parseInt(acOp.style.left) - 1 + "px";
break;
case 38:
acOp.style.top = parseInt(acOp.style.top) - 1 + "px";
break;
case 39:
acOp.style.left = parseInt(acOp.style.left) + 1 + "px";
break;
case 40:
acOp.style.top = parseInt(acOp.style.top) + 1 + "px";
break;
}
}
function clearSel()
{
var acOp = getAc();
if(acOp == null)return;
acOp.style.borderWidth = "0px";
acOp.style.left = parseInt(acOp.style.left) + 1 + "px";
acOp.style.top = parseInt(acOp.style.top) + 1 + "px";
actionObj.length -= 1;
//设置拖动点
bar.style.display = "none";
}
function getAc()
{
if(actionObj.length > 0)
return actionObj[actionObj.length - 1];
else
return null;
}
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ctbinzi/archive/2006/07/08/893927.aspx