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

Buy a television by dragging it to the shopping cart

<title>Ajax Drag and Drop</title>

<style type="text/css">
#television {
background: #FF0000;

#target {
background: #00FF00;

<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( { =;
} else { = 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(;
offsetY = e.y - parseInt(;
document.getElementById("targetDiv").innerHTML = "";

function handleMove(e)
var e = new MouseEvent(e);
var x = e.x - offsetX; = x + "px";
var y = e.y - offsetY; = y + "px";

function handleUp(e)
var e = new MouseEvent(e);
removeListener("mousemove", handleMove);
removeListener("mouseup", handleUp);

var target = document.getElementById("target");
var x = parseInt(;
var y = parseInt(;
var width = parseInt(;
var height = parseInt(;

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

if(XMLHttpRequestObject) {"GET", "text.txt");

XMLHttpRequestObject.onreadystatechange = function()
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
document.getElementById("targetDiv").innerHTML =


<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;"

<div id="target"
style="left:300px; top:300px; width:200px; height:100px;">
Shopping Cart</div>


Ajax for Web Application Developers

Ajax is one of the latest and greatest ways to improve users' online experience and create new and innovative web functionality. By allowing specific parts of a web page to be displayed without refreshing the entire page, Ajax significantly enhances the experience of web applications. It also lets web developers create intuitive and innovative interaction processes.
Ajax for Web Application Developers provides the in-depth working knowledge of Ajax that web developers need to take their web applications to the next level. I will show you how to create an Ajax-driven web application from an object-oriented perspective, and it includes discussion of several useful Ajax design patterns.
This detailed Ajax Training covers the creation of connections to a MySQL database with PHP 5 via a custom Ajax engine and shows how to gracefully format the response with CSS, JavaScript, and XHTML while keeping the data tightly secure. It also covers the use of four custom Ajax-enabled components in an application and how to create each of them from scratch.
This AJAX Training combines the individual code examples and techniques, Ajax-driven application an internal web mail application that can be used in any user-based application, such as a community-based web application. You will learn not only how to create and use their own reusable Ajax components in this application
but also how to connect their components to any future Ajax applications that they might build.

Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex