Demo Dynamic HTML - Drag'n'drop 1

Drag'n'drop 1

Compatibilidad: Ms Internet Explorer, Netscape

HTML dinámico permite arrastrar objetos en la página gracias a las potencialidades de su modelo de objetos.
En esta demo una imagen puede arrastrarse a cualquier parte de la pantalla.

[ 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">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	if (n) {
		dragObj = document.squareDiv
		dragObj.xpos = dragObj.left
		dragObj.ypos = dragObj.top
		dragObj.w = dragObj.clip.width
		dragObj.h = dragObj.clip.width
	}
	if (ie) {
		dragObj = squareDiv.style
		dragObj.xpos = dragObj.pixelLeft
		dragObj.ypos = dragObj.pixelTop
		dragObj.w = dragObj.pixelWidth
		dragObj.h = dragObj.pixelHeight
	}

dragActive = 0
		
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
	if ((n && e.which == 1) || ie) {
		if (n) {var x=e.pageX; var y=e.pageY}
		if (ie) {var x=event.x; var y=event.y}
		if (x>=dragObj.xpos && x<=dragObj.xpos+dragObj.w && y>=dragObj.ypos && y<=dragObj.ypos+dragObj.h) {
			dragClickX = x-dragObj.xpos
			dragClickY = y-dragObj.ypos
			dragActive = 1
		}
	}
}

function mouseMove(e) {
	if (n) {var x=e.pageX; var y=e.pageY}
	if (ie) {var x=event.x; var y=event.y}
	if (dragActive) {
		dragObj.xpos = x-dragClickX
		dragObj.ypos = y-dragClickY
		dragObj.left = dragObj.xpos
		dragObj.top = dragObj.ypos
		return false
	}
}

function mouseUp(e) {
	if (n) {var x=e.pageX; var y=e.pageY}
	if (ie) {var x=event.x; var y=event.y}
	dragActive = 0
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>

</HEAD>

</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]