[LON-CAPA-cvs] cvs: modules /gerd/dragdrop dd.html

Thu, 01 Feb 2007 22:07:46 -0000

www		Thu Feb  1 17:07:46 2007 EDT

  Added files:                 
    /modules/gerd/dragdrop	dd.html 
  Log:
  Cute piece of code that does drap and drop
  
  

Index: modules/gerd/dragdrop/dd.html
+++ modules/gerd/dragdrop/dd.html
<!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>
<script type="text/javascript">
var object = null;
var cX = 0;
var cY = 0;
function initPage(){
	document.onmousedown = pickIt;
	document.onmousemove = dragIt;
	document.onmouseup = dropIt;
}
function pickIt(evt){
	evt = (evt) ? evt : ((window.event) ? event : null);
	var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
	if(objectID.indexOf('chip') != -1) object = document.getElementById(objectID);
	if(object) {
		object.style.zIndex = 100;
		cX = evt.clientX - object.offsetLeft;
		cY = evt.clientY - object.offsetTop;
		return;
	} else {
		object = null;
		return;
	}
}
function dragIt(evt) {
	evt = (evt) ? evt : ((window.event) ? event : null);
	if(object){
		object.style.left = evt.clientX - cX + 'px';
		object.style.top = evt.clientY - cY + 'px';
		return false;
	}
}
function dropIt(){
	if(object) {
		object.style.zIndex = 0;
		object = null;
		return false;
	}
}
</script>
<style type = "text/css">
chip {
	background-color: #D2DEEB;
	position: absolute;
	cursor: pointer;
}
#chip1 {
	left: 100px;
	top: 50px;
}
#chip2 {
	left: 200px;
	top: 50px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DD?</title>
</head>
<body onLoad="initPage()">
<span id="chip1" class="chip">One</span>
<span id="chip2" class="chip">Two</span>

</body>
</html>