Buy a television by dragging it to the shopping cart
<html>
<head>
<title>Ajax Drag and Drop</title>
<style type="text/css">
#television {
position:absolute;
z-index:200;
background: #FF0000;
color:#0000FF;
}
#target {
position:absolute;
background: #00FF00;
color:#000000;
}
</style>
<script type="text/javascript">
var offsetX, offsetY;
function MouseEvent(e)
{
if(e) {
this.e = e;
} else {
this.e = window.event;
}
if(e.pageX) {
this.x = e.pageX;
} else {
this.x = e.clientX;
}
if(e.pageY) {
this.y = e.pageY;
} else {
this.y = e.clientY;
}
if(e.target) {
this.target = e.target;
} else {
this.target = e.srcElement;
}
}
function addListener(type, callback)
{
if (document.addEventListener) {
document.addEventListener(type, callback, false);
} else if (document.attachEvent) {
document.attachEvent("on"+type, callback, false);
}
}
function removeListener (type, callback)
{
if (document.removeEventListener) {
document.removeEventListener(type, callback, false);
} else if (document.detachEvent) {
document.detachEvent("on" + type, callback, false);
}
}
function handleDown(e)
{
var e = new MouseEvent(e);
addListener("mousemove", handleMove);
addListener("mouseup", handleUp);
offsetX = e.x - parseInt(e.target.style.left);
offsetY = e.y - parseInt(e.target.style.top);
document.getElementById("targetDiv").innerHTML = "";
}
function handleMove(e)
{
var e = new MouseEvent(e);
var x = e.x - offsetX;
e.target.style.left = x + "px";
var y = e.y - offsetY;
e.target.style.top = y + "px";
}
function handleUp(e)
{
var e = new MouseEvent(e);
removeListener("mousemove", handleMove);
removeListener("mouseup", handleUp);
var target = document.getElementById("target");
var x = parseInt(target.style.left);
var y = parseInt(target.style.top);
var width = parseInt(target.style.width);
var height = parseInt(target.style.height);
if(e.x > x && e.x < x + width &&
e.y > y && e.y < y + height){
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", "text.txt");
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
document.getElementById("targetDiv").innerHTML =
XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
}
</script>
</head>
<body>
<h1>Buy a television by dragging it to the shopping cart</h1>
<div id="targetDiv"></div>
<div id="television"
style="left:200px; top:100px; width:80px; height:80px;"
onmousedown="handleDown(event);">Television</div>
<div id="target"
style="left:300px; top:300px; width:200px; height:100px;">
Shopping Cart</div>
</body>
</html>
