Pagina index.php que muestra el resultado
------------------------------------------------------------------------------------------------------
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="drag.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function init() {
// inicializar capas
f1 = new DynLayer("ficha1",null)
f2 = new DynLayer("ficha2",null)
// añadir las capas a mover al objeto drag
drag.add(f1, f2)
// inicializar eventos de ratón
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
function mouseDown(e) {
if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
if (drag.mouseDown(x,y)) {
// escribir aquí el código para hacer cualquier cosa al comenzar a arrastrar
return false
}
else return true
}
function mouseMove(e) {
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
if (drag.mouseMove(x,y)) {
// escribir aquí el código para hacer cualquier cosa mientras arrastramos
return false
}
else return true
}
function mouseUp(e) {
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
if (drag.mouseUp()) {
// escribir aquí el código para hacer cualquier cosa al finalizar el arrastrar
document.cookie="ID = "+x;
document.cookie="ID2 = "+y;
return false
}
else return true
}
</SCRIPT>
<STYLE TYPE="text/css">
#ficha1 {
position: absolute; left: <?=$_COOKIE['ID']?>; top: <?=$_COOKIE['ID2']?>; cursor:move; visibility: visible; z-index:1;
#ficha2 {
position: absolute; left: <?=$_COOKIE['ID3']?>; top: <?=$_COOKIE['ID4']?>; cursor:move; visibility: visible; z-index:1;
}
</STYLE>
</head>
<body onLoad="init()">
<div id="ficha1">Texto que se tiene que mover</div>
<div id="ficha2">Texto que se tiene que mover</div>
</body>
</html>