Demo Dynamic HTML - Drag'n'drop 2

Drag'n'drop 2

Compatibilidad: Ms Internet Explorer, Netscape

Como en el ejemplo anterior, esta demo permite, gracias a las potencialidades del DOM de HTML dinámico, arrastrar objetos en la página.
En esta demo pueden arrastrarse tres imágenes a cualquier parte de la pantalla de manera completamente autónoma una de otra

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="javascript">
//---------IE CLICK N DRAG CODE--------------------
var curElement;
function doMouseMove() {
  var newleft=0, newTop = 0
  if ((event.button==1) && (curElement!=null)) {
        // position object
        newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
        if (newleft<0) newleft=0
        curElement.style.pixelLeft= newleft
        newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
        if (newtop<0) newtop=0
        curElement.style.pixelTop= newtop
        event.returnValue = false
        event.cancelBubble = true
    }
  }

function doDragStart() {
    // Don't do default drag operation.
    if ("IMG"==event.srcElement.tagName)
      event.returnValue=false;
  }

function doMouseDown() {
    if ((event.button==1) && (event.srcElement.tagName=="IMG"))
      curElement = event.srcElement
  }

if (navigator.appName != "Netscape") {
  document.ondragstart = doDragStart;
  document.onmousedown = doMouseDown;
  document.onmousemove = doMouseMove;
  document.onmouseup = new Function("curElement=null")
 }

//--------NETSCAPE CLICK N DRAG CODE--------------------
		var oldX, oldY, objSelected="null";
		var totalDraggableItems=2;
		
function begindrag(e) {
	objSelected=getSelectedElement(e.pageX,e.pageY);
	if (objSelected != "null"){
   	 	document.captureEvents(Event.MOUSEMOVE);
   	 	document.onmousemove=drag; 
    		oldX=e.pageX;
    		oldY=e.pageY;
    		return false;
	}
}
function enddrag(e) {
    	document.onmousemove=0; 
    	document.releaseEvents(Event.MOUSEMOVE);
	objSelected="null";
	return false;
}
function drag(e) {
    	obj.offset(e.pageX - oldX, e.pageY - oldY);
    	oldX = e.pageX;
    	oldY = e.pageY;
}
 if (navigator.appName == "Netscape") {
	document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
	document.onmousedown=begindrag;
	document.onmouseup=enddrag;
}

</SCRIPT>
<STYLE TYPE="text/css">
#model {POSITION: absolute;  VISIBILITY: visible;  LEFT: 100; TOP: 100; Z-INDEX: 10; }
#draggableItem1 {POSITION: absolute;  VISIBILITY: visible; LEFT: 200; TOP: 100; Z-INDEX: 20; }
#draggableItem2 {POSITION: absolute;  VISIBILITY: visible; LEFT: 200; TOP: 160; Z-INDEX: 30; }
</STYLE>

</HEAD>

<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == "Netscape") {
document.write('<DIV ID="model"><IMG SRC="big.gif" WIDTH=150 HEIGHT=113 BORDER=0></DIV>');
document.write('<DIV ID="draggableItem1"><IMG NAME="draggableItem1" SRC="small.gif" WIDTH=75 HEIGHT=90 BORDER=0></DIV>');
document.write('<DIV ID="draggableItem2"><IMG NAME="draggableItem2" SRC="reversed.gif" WIDTH=50 HEIGHT=55 BORDER=0></DIV>');
}else{
document.write('<DIV ID=OuterDiv style="width:100%;height:280px; width: 600px; ">');
document.write('<IMG ID="model" SRC="big.gif" WIDTH=160 HEIGHT=245 BORDER=0>');
document.write('<IMG ID="draggableItem1" SRC="small.gif" WIDTH=75 HEIGHT=90 BORDER=0>');
document.write('<IMG ID="draggableItem2" SRC="reversed.gif" WIDTH=50 HEIGHT=55 BORDER=0>');
document.write('</DIV>');
document.write('<SCRIPT FOR="bigFly" EVENT="onmousedown">');
document.write('event.cancelBubble=true');
document.write('<\/SCRIPT>');
}
</SCRIPT>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]