有时候我们上传图片时希望立即显示出来,也有时候希望图片能根据自己的意愿拖动,下面的代码可以实现我们想要的效果。
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
< head runat = " server " >
< title > 鼠标拖动测试 < / title>
< script type = " text/javascript " language = " javascript " >
// 为Number增加一个属性,判断当前数据类型是否是数字
Number.prototype.NaN0 = function (){ return isNaN( this ) ? 0 : this ;}
// 全局变量
var iMouseDown = false ;
var dragObject = null ;
// 获得鼠标的偏移量(对象2-对象1)
function getMouseOffset(target,ev)
{
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x,y:mousePos.y - docPos.y};
}
// 获得事件发生的实际位置----------------------对象1
function getPosition(e)
{
var left = 0 ;
var top = 0 ;
// 相对位置累加得到实际位置
while (e.offsetParent)
{
left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0(): 0 );
top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0(): 0 );
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0(): 0 );
top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0(): 0 );
return {x:left,y:top};
}
// 获得发生事件鼠标的位置----------------------对象2
function mouseCoords(ev)
{
if (ev.pageX || ev.pageY)
{
return {x:ev.pageX,y:ev.pageY};
}
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
}
// 定义可以拖拽的对象
function makeDragable(item)
{
if ( ! item) return ;
// 为可拖拽对象定义一个onmousedown事件的方法
ev = window.event;
item.onmousedown = function (ev)
{
dragObject = this ;
mouseOffset = getMouseOffset( this ,ev);
return false ;
}
}
// 定义鼠标点下所调用的方法
function mouseDown(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.onmousedown || target.getAttribute( ' DragObj ' ))
{
return false ;
}
}
// 鼠标抬起后释放对象
function mouseUp(ev)
{
dragObject = null ;
// onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
iMouseDown = false ;
}
// 鼠标移动
function mouseMove(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
if (dragObject)
{
if (dragObject.style)
{
// 移动对象
dragObject.style.left = mousePos.x - mouseOffset.x;
dragObject.style.top = mousePos.y - mouseOffset.y;
}
}
// lMouseState = iMouseDown;
if (dragObject) return false ;
}
document.onmousedown = mouseDown;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
function moveImg()
{
var img1 = document.getElementById( ' img1 ' );
makeDragable(img1);
}
< / script>
< / head>
< body onload = " moveImg() " >
< form id = " form1 " >
< input type = " file " onchange = " javascript:document.getElementById('img1').src=this.value "/ >
< img src = " a.jpg " alt = "" id = " img1 " style = " position:absolute; " / >
< / form>
< / body>
< / html>
< head runat = " server " >
< title > 鼠标拖动测试 < / title>
< script type = " text/javascript " language = " javascript " >
// 为Number增加一个属性,判断当前数据类型是否是数字
Number.prototype.NaN0 = function (){ return isNaN( this ) ? 0 : this ;}
// 全局变量
var iMouseDown = false ;
var dragObject = null ;
// 获得鼠标的偏移量(对象2-对象1)
function getMouseOffset(target,ev)
{
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x,y:mousePos.y - docPos.y};
}
// 获得事件发生的实际位置----------------------对象1
function getPosition(e)
{
var left = 0 ;
var top = 0 ;
// 相对位置累加得到实际位置
while (e.offsetParent)
{
left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0(): 0 );
top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0(): 0 );
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0(): 0 );
top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0(): 0 );
return {x:left,y:top};
}
// 获得发生事件鼠标的位置----------------------对象2
function mouseCoords(ev)
{
if (ev.pageX || ev.pageY)
{
return {x:ev.pageX,y:ev.pageY};
}
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
}
// 定义可以拖拽的对象
function makeDragable(item)
{
if ( ! item) return ;
// 为可拖拽对象定义一个onmousedown事件的方法
ev = window.event;
item.onmousedown = function (ev)
{
dragObject = this ;
mouseOffset = getMouseOffset( this ,ev);
return false ;
}
}
// 定义鼠标点下所调用的方法
function mouseDown(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.onmousedown || target.getAttribute( ' DragObj ' ))
{
return false ;
}
}
// 鼠标抬起后释放对象
function mouseUp(ev)
{
dragObject = null ;
// onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
iMouseDown = false ;
}
// 鼠标移动
function mouseMove(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
if (dragObject)
{
if (dragObject.style)
{
// 移动对象
dragObject.style.left = mousePos.x - mouseOffset.x;
dragObject.style.top = mousePos.y - mouseOffset.y;
}
}
// lMouseState = iMouseDown;
if (dragObject) return false ;
}
document.onmousedown = mouseDown;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
function moveImg()
{
var img1 = document.getElementById( ' img1 ' );
makeDragable(img1);
}
< / script>
< / head>
< body onload = " moveImg() " >
< form id = " form1 " >
< input type = " file " onchange = " javascript:document.getElementById('img1').src=this.value "/ >
< img src = " a.jpg " alt = "" id = " img1 " style = " position:absolute; " / >
< / form>
< / body>
< / html>