Buy a television by dragging it to the shopping cart | Ajax Drag and Drop ~ Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples
Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples: Buy a television by dragging it to the shopping cart | Ajax Drag and Drop

Buy a television by dragging it to the shopping cart | Ajax Drag and Drop

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>


Related Posts by Categories

0 comments:

Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex