用JavaScript移动对象

来源:互联网 发布:配电柜电路图软件 编辑:程序博客网 时间:2024/05/20 16:36

                             drag me->  <-drag me

源代码:

<script type="text/javascript">
var xOffset,yOffset;
function dragStart()
{
    
var obj=event.srcElement;
    obj.style.position
="absolute";
    obj.setCapture();
    xOffset
=event.x-obj.offsetLeft;
    yOffset
=event.y-obj.offsetTop;
}

function doDrag()
{
    event.srcElement.style.left
=event.x-xOffset;
    event.srcElement.style.top 
=event.y-yOffset;
}

function dragEnd()
{
    event.srcElement.style.cursor
="default";
    event.srcElement.releaseCapture();
}

</script>
<img src="http://www.w3.org/Icons/valid-xhtml10.png" onmousedown="this.style.cursor='move'" onmouseup="this.style.cursor='default'" ondragstart="dragStart()" ondrag="doDrag()" ondragend="dragEnd()" />