Javascript实现图片位置控制（鼠标拖拽 + 键盘方向键移动）源码分享

最新推荐文章于 2022-12-20 17:30:40 发布

ctbinzi

最新推荐文章于 2022-12-20 17:30:40 发布

阅读量7.1k

点赞数

分类专栏： JavaScript 文章标签： javascript function microsoft null xhtml html

本文链接：https://blog.csdn.net/ctbinzi/article/details/893927

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现图片的拖拽和鼠标方向控制位移

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>

JS文件代码如下(Drag.js)：

var actionObj = new Array();
var bar;
var isIE,isNS;

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

代码不是很工整，望谅解，有不清楚的地方，可以与我联系，Email:ctbinzi@gmail.com

如果有错误，还望提出

愿与大家分享技术！