拖拽元素到指定区域-优快云博客

移动的层

<!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>
    <title>无标题页</title>
    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>


    <div id="a" class="dragElement"> </div>


    <div id="dZone" style="position:absolute; top:100px; right:200; width:300px; height:300px" class="DefaultDropZoneColor">
    Drop Zone 1
    </div>

    <div id="dZone2" class="DefaultDropZoneColor" style="position:absolute; top:500px; right:200px; width:300px; height:300px">
    Drop Zone 2
    </div>

    <div id="dZone3" class="DefaultDropZoneColor" style="position:absolute; top:300;right:100px; width:100px; height:200px">
    Drop Zone 3
    </div>


    </div>
</body>
</html>
<script language="javascript" type="text/javascript">

var dropZoneArray = new Array(5);
dropZoneArray[0] = "dZone";
dropZoneArray[1] = "dZone2";
dropZoneArray[2] = "dZone3";

var mouseState = 'up';

function MakeElementDraggable(obj)
{
var startX = 0;
var startY = 0;

function InitiateDrag(e)
{
    var evt = e || window.event;

    startX = parseInt(evt.clientX);
    startY = parseInt(evt.clientY);

    obj.style.top = parseInt(startY) + 'px';
    obj.style.left = parseInt(startX) + 'px';


    document.onmousemove = Drag;
    document.onmouseup = Drop;

    return false;
}

function Drop(e)
{
       var evt = e || window.event;

    // check that if we are in the drop zone
    if(IsInDropZone(evt))
    {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

function Drag(e)
{

    // only drag when the mouse is down

    var dropZoneObject;

    var evt = e || window.event;

    obj.style.top = evt.clientY + 'px';
    obj.style.left = evt.clientX + 'px';

    // Check if we are in the drop Zone
    if(IsInDropZone(evt))
    {
        dropZoneObject = evt.srcElement;
        dropZoneObject.className = 'highlightDropZone';
    }

    else
    {
        ResetColor();

    }


}

a.onmousedown = InitiateDrag;

}

function ResetColor()
{
    document.getElementById("dZone").className = 'DefaultDropZoneColor';
    document.getElementById("dZone2").className = 'DefaultDropZoneColor';
    document.getElementById("dZone3").className = 'DefaultDropZoneColor';

}