Ayuda please con script para mover capas (Hosting de regalo a quien pueda ayudarme)

delco · #1 (**permalink**) 17/07/2008, 14:12

Hola buenas

Estoy tratando de arreglar un script en javascript para poder mover objetos y guardar la posicion del objeto dentro de una cookie,

el script funciona correctamente la hacerlo funcionar con un objeto, guarda correctamente la posision del objeto y lee la ultima posision del objeto super bien.

Pero el problema esta en que necesito que mas de un objeto se pueda mover y no se como diferenciar cada objeto por separado para poder guardar la posision de cada objeto.

y tambien el script tiene el problema de que al mover el objeto no queda en la posision exacta en donde lo deje sino que se mueve unos pixeles hacia la derecha y hacia abajo.

revisando el movimiento del objeto descubri que si lo seleccionas presisamente desde la esquina derecha de arriba se queda justo en donde lo deje.

en el post de abajo dejo el script que utilizo para que lo vean.

aqui esta el link para que lo vean en funcionamiento

http://pds7.com/prueba/

Por favor si alguien me puede ayudar le estare muy agradecido.

Soy reseller de hosting y si a alguien que me pueda ayudar le sirve le puedo regalar un hosting de 100 mb, email ilimitados, bd ilimitadas, 2gb de transferencia mensual, con Cpanel, Fantastico, etc... por 1 año

Muchas Gracias ojala puedan ayudarme ya que lo necesito urgente
Saludos

delco · #2 (**permalink**) 17/07/2008, 14:14

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&iacute;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>

delco · #3 (**permalink**) 17/07/2008, 14:15

drag.js
-------------------------------------------------------------------------------------------------

Código:

// Drag Object
// an object that makes an unlimited number DynLayers draggable
// 19990326

// Copyright (C) 1999 Dan Steinman
// Distributed under the terms of the GNU Library General Public License
// Available at http://www.dansteinman.com/dynduo/

function Drag(dynlayer) {
	this.element = dynlayer
	this.obj = null
	this.array = new Array()
	this.active = false
	this.offsetX = 0
	this.offsetY = 0
	this.zIndex = 0
	this.resort = true
	this.add = DragAdd
	this.remove = DragRemove
	this.setGrab = DragSetGrab
	this.mouseDown = DragMouseDown
	this.mouseMove = DragMouseMove
	this.mouseUp = DragMouseUp
}
function DragAdd() {
	for (var i=0; i<arguments.length; i++) {
		var l = this.array.length
		this.array[l] = arguments[i]
		this.array[l].dragGrab = new Array(0,this.array[l].w,this.array[l].h,0)
		this.zIndex += 1
	}
}
function DragSetGrab(dynlayer,top,right,bottom,left) { 
	dynlayer.dragGrab = new Array(top,right,bottom,left)
}
function DragRemove() {
	for (var i=0; i<arguments.length; i++) {
		for (var j=0; j<this.array.length; j++) {
			if (this.array[j]==arguments[i]) {
				for (var k=j;k<=this.array.length-2;k++) this.array[k] = this.array[k+1]
				this.array[this.array.length-1] = null
				this.array.length -= 1
				break
			}
		}
	}
}
function DragMouseDown(x,y) {
	for (var i=this.array.length-1;i>=0;i--) {
		var lyr = this.array[i]
		if (this.element) {x+=this.element.x; y+=this.element.y}
		if (checkWithin(x,y,lyr.x+lyr.dragGrab[3],lyr.x+lyr.dragGrab[1],lyr.y+lyr.dragGrab[0],lyr.y+lyr.dragGrab[2])) {
			this.obj = this.array[i]
			this.offsetX = x-this.obj.x
			this.offsetY = y-this.obj.y
			this.active = true
			break
		}
	}
	if (this.active && this.resort) {
		this.obj.css.zIndex = this.zIndex++
		for (var j=i;j<=this.array.length-2;j++) this.array[j] = this.array[j+1]
		this.array[this.array.length-1] = this.obj
	}
	if (!this.active) return false
	else return true
}
function DragMouseMove(x,y) {
	if (!this.active) return false
	else {
		if (this.element) {x+=this.element.x; y+=this.element.y}
		this.obj.moveTo(x-this.offsetX,y-this.offsetY)
		return true
	}
}
function DragMouseUp() {
	if (!this.active) return false
	else {
		this.active = false
		return true
	}
}

// automatically define the "drag" object
drag = new Drag()

// checkWithin() function is required
function checkWithin(x,y,left,right,top,bottom) {
	if (x>=left && x<right && y>=top && y<bottom) return true
	else return false
}

delco · #4 (**permalink**) 17/07/2008, 14:16

dynlayer.js
-----------------------------------------------------------------------------------------------

Código:

// Dynamic Layer Object
// sophisticated layer/element targeting and animation object which provides the core functionality needed in most DHTML applications
// 19990326

// Copyright (C) 1999 Dan Steinman
// Distributed under the terms of the GNU Library General Public License
// Available at http://www.dansteinman.com/dynduo/

// BrowserCheck Object
// provides browser checking variables
function BrowserCheck() {
	var b = navigator.appName
	if (b=="Netscape") this.b = "ns"
	else if (b=="Microsoft Internet Explorer") this.b = "ie"
	else this.b = b
	this.version = navigator.appVersion
	this.v = parseInt(this.version)
	this.ns = (this.b=="ns" && this.v>=4)
	this.ns4 = (this.b=="ns" && this.v==4)
	this.ns5 = (this.b=="ns" && this.v==5)
	this.ie = (this.b=="ie" && this.v>=4)
	this.ie4 = (this.version.indexOf('MSIE 4')>0)
	this.ie5 = (this.version.indexOf('MSIE 5')>0)
	this.min = (this.ns||this.ie)
}
is = new BrowserCheck()

// DynLayer Constructor
function DynLayer(id,nestref,frame) {
	if (!DynLayer.set && !frame) DynLayerInit()
	if (is.ns) {
		if (is.ns) {
			if (!frame) {
				if (!nestref) var nestref = DynLayer.nestRefArray[id]
				if (DynLayer.useTest && !DynLayerTest(id,nestref)) return
				this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]
			}
			else this.css = (nestref)? eval("parent."+frame+".document."+nestref+".document."+id) : parent.frames[frame].document.layers[id]
			this.elm = this.event = this.css
			this.doc = this.css.document
		}
		if (is.ns5) {
			this.elm = document.getElementById(id)
			this.css = this.elm.style
			this.doc = document
		}
		this.x = this.css.left
		this.y = this.css.top
		this.w = this.css.clip.width
		this.h = this.css.clip.height
	}
	else if (is.ie) {
		this.elm = this.event = (frame)? parent.frames[frame].document.all[id] : document.all[id]
		this.css = (frame)? parent.frames[frame].document.all[id].style : document.all[id].style
		this.doc = document
		this.x = this.elm.offsetLeft
		this.y = this.elm.offsetTop
		this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth
		this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight
	}
	this.id = id

	this.obj = id + "DynLayer"
	eval(this.obj + "=this")
	this.moveTo = DynLayerMoveTo
	this.moveBy = DynLayerMoveBy
	this.show = DynLayerShow
	this.hide = DynLayerHide
	this.slideInit = DynLayerSlideInit
	this.clipInit = DynLayerClipInit
	this.write = DynLayerWrite
}

// DynLayer Core Methods (moveTo, moveBy, hide, show)
function DynLayerMoveTo(x,y) {
	if (x!=null) {
		this.x = x
		if (is.ns) this.css.left = this.x
		else this.css.pixelLeft = this.x
	}
	if (y!=null) {
		this.y = y
		if (is.ns) this.css.top = this.y
		else this.css.pixelTop = this.y
	}
}
function DynLayerMoveBy(x,y) {
	this.moveTo(this.x+x,this.y+y)
}
function DynLayerShow() {
	this.css.visibility = (is.ns)? "show" : "visible"
}
function DynLayerHide() {
	this.css.visibility = (is.ns)? "hide" : "hidden"
}

// DynLayer Slide Methods (optional)
// straight line animation methods
function DynLayerSlideInit() {
	this.slideTo = DynLayerSlideTo
	this.slideBy = DynLayerSlideBy
	this.slideStart = DynLayerSlideStart
	this.slide = DynLayerSlide
	this.onSlide = new Function("")
	this.onSlideEnd = new Function("")
}
function DynLayerSlideTo(endx,endy,inc,speed,fn) {
	if (endx==null) endx = this.x
	if (endy==null) endy = this.y
	var distx = endx-this.x
	var disty = endy-this.y
	this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideBy(distx,disty,inc,speed,fn) {
	var endx = this.x + distx
	var endy = this.y + disty
	this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) {
	if (this.slideActive) return
	if (!inc) inc = 10
	if (!speed) speed = 20
	var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
	if (num==0) return
	var dx = distx/num
	var dy = disty/num
	if (!fn) fn = null
	this.slideActive = true
	this.slide(dx,dy,endx,endy,num,1,speed,fn)
}
function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) {
	if (!this.slideActive) return
	if (i++ < num) {
		this.moveBy(dx,dy)
		this.onSlide()
		if (this.slideActive) setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",speed)
		else this.onSlideEnd()
	}
	else {
		this.slideActive = false
		this.moveTo(endx,endy)
		this.onSlide()
		this.onSlideEnd()
		eval(fn)
	}
}

// DynLayer Clip Methods (optional)
// provides layer clipping functionality
function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) {
	this.clipTo = DynLayerClipTo
	this.clipBy = DynLayerClipBy
	this.clipValues = DynLayerClipValues
	if (is.ie) {
		if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft)
		else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)
	}
}
function DynLayerClipTo(t,r,b,l) {
	if (t==null) t = this.clipValues('t')
	if (r==null) r = this.clipValues('r')
	if (b==null) b = this.clipValues('b')
	if (l==null) l = this.clipValues('l')
	if (is.ns) {
		this.css.clip.top = t
		this.css.clip.right = r
		this.css.clip.bottom = b
		this.css.clip.left = l
	}
	else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
function DynLayerClipBy(t,r,b,l) {
	this.clipTo(this.clipValues('t')+t,this.clipValues('r')+r,this.clipValues('b')+b,this.clipValues('l')+l)
}
function DynLayerClipValues(which) {
	if (is.ie) var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px")
	if (which=="t") return (is.ns)? this.css.clip.top : Number(clipv[0])
	if (which=="r") return (is.ns)? this.css.clip.right : Number(clipv[1])
	if (which=="b") return (is.ns)? this.css.clip.bottom : Number(clipv[2])
	if (which=="l") return (is.ns)? this.css.clip.left : Number(clipv[3])
}

// DynLayer Write Method (optional)
// rewrites the contents of the layer
function DynLayerWrite(html) {
	if (is.ns) {
		this.doc.open()
		this.doc.write(html)
		this.doc.close()
	}
	else if (is.ie) {
		this.event.innerHTML = html
	}
}

// DynLayerTest Function (optional - disable with DynLayer.useTest=false)
// makes sure the layer target is correct before assigning the DynLayer, outputs useful info if incorrect
function DynLayerTest(id,nestref) {
	var ref = new Array()
	if (nestref) ref = nestref.split('.document.')
	ref[ref.length] = id
	var refstr = (is.ns)? 'document.'+ref[0] : 'document.all.'+ref[0]
	for (var i=1; i<=ref.length; i++) {
		if (eval(refstr)) {
			if (ref.length==i) return true
			else refstr += (is.ns)? '.document.'+ref[i] : '.all.'+ref[i]
		}
		else {
			var str ='DynLayer Error:'
			for (j in ref) {
				str += '\n'+ref[j]
				if (j==i-1) str += '  <-- this layer cannot be found'
			}
			if (DynLayerTest.count++<5) alert(str)
			else alert("Too many DynLayer errors, quitting.")
			return false
		}
	}
	return false
}
DynLayerTest.count = 0

// DynLayerInit
// automatically retrieves nested heirarchy of the layer and defines DynLayers named with "Div"
function DynLayerInit(nestref) {
	if (!DynLayer.set) DynLayer.set = true
	if (is.ns) {
		if (nestref) ref = eval('document.'+nestref+'.document')
		else {nestref = ''; ref = document;}
		for (var i=0; i<ref.layers.length; i++) {
			var divname = ref.layers[i].name
			DynLayer.nestRefArray[divname] = nestref
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'","'+nestref+'")')
			}
			if (ref.layers[i].document.layers.length > 0) {
				DynLayer.refArray[DynLayer.refArray.length] = (nestref=='')? ref.layers[i].name : nestref+'.document.'+ref.layers[i].name
			}
		}
		if (DynLayer.refArray.i < DynLayer.refArray.length) {
			DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])
		}
	}
	else if (is.ie) {
		for (var i=0; i<document.all.tags("DIV").length; i++) {
			var divname = document.all.tags("DIV")[i].id
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')
			}
		}
	}
	return true
}
DynLayer.nestRefArray = new Array()
DynLayer.refArray = new Array()
DynLayer.refArray.i = 0
DynLayer.set = false
DynLayer.useTest = true

// CSS function (optional)
// returns CSS syntax for generated layers
function css(id,left,top,width,height,color,vis,z,other) {
	if (id=="START") return '<STYLE TYPE="text/css">\n'
	else if (id=="END") return '</STYLE>'
	var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;'
	if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'
	if (arguments.length>=5 && height!=null) {
		str += ' height:'+height+'px;'
		if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'
	}
	if (arguments.length>=6 && color!=null) str += (is.ns)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'
	if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'
	if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'
	if (arguments.length==9 && other!=null) str += ' '+other
	str += '}\n'
	return str
}
function writeCSS(str,showAlert) {
	str = css('START')+str+css('END')
	document.write(str)
	if (showAlert) alert(str)
}

MaBoRaK · #5 (**permalink**) 17/07/2008, 15:47

loading.................

Tienes la demo en linea? será mejor ver así EL ERROR.

Te modifico el cñodigo no por hosting sino por CUENTA SHELL... sin host ni nada así... :p

connection closed.

delco · #6 (**permalink**) 17/07/2008, 16:06

Hola amigo lamentablemente no puedo entregar ese tipo de cuentas

y voy a tratar de subir una muestra del script para que sea mas facil su visualizacion

aqui esta el link para que lo vean en funcionamiento

http://pds7.com/prueba/

Muchas gracias

MaBoRaK · #7 (**permalink**) 17/07/2008, 16:12

loading............

Era broma, sube el demo y aca te ayudamos ;) para eso estamos.

connection closed.

delco · #8 (**permalink**) 17/07/2008, 16:25

JEJE aqui dejo el link para que lo veas en funcionamiento

http://pds7.com/prueba/

Saludos

delco · #9 (**permalink**) 21/07/2008, 10:16

mmmmmmmmmm

alguien sabes como puedo hacer lo que necestio??

Gracias

marcopoloaz06 · #10 (**permalink**) 21/07/2008, 12:49

Bueno,
como dijiste
que te lo podia
hacer con jQuery
aqui esta, si ves bien es
mucho mas facil

Código HTML:

<html>
<head>
<title> </title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
 <script type="text/javascript">
    function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ';', len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
    }
    function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+'='+escape( value ) +
		( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
		( ( path ) ? ';path=' + path : '' ) +
		( ( domain ) ? ';domain=' + domain : '' ) +
		( ( secure ) ? ';secure' : '' );
    }
 </script>
 <script type="text/javascript">

$(document).ready(function(){
    
    var o = {
            cursor:"crosshair",
            stop:function(e,ui){
                setCookie( $(this).attr("alt"), ui.absolutePosition.top +"::"+ ui.absolutePosition.left );
            }
            };
    
    $("*[alt^='dRag']").each(function(i){
    
        var th = $(this);
        var coo = getCookie( th.attr("alt") );
        if( coo!=undefined ){
            var pos = coo.split("::");
            th.css({top:pos[0],left:pos[1]});
        }
        th.draggable(o);
    
    });

});

 </script>
</head>






<img src="http://www.forosdelweb.com/images/logos/logo_foros.png" alt="dRag11" style="position:absolute;"></img>
<img src="http://www.seriousteam.es/images/forosdelweb2.JPG" alt="dRag10" style="position:absolute;"></img>
<span alt="dRag0" style="position:absolute;font-size:1em;">TEXTO0</span>
<span alt="dRag1" style="position:absolute;font-size:2.1em;color:brown;">TEXTO1</span>
<span alt="dRag2" style="position:absolute;font-size:1.2em;color:pink;">TEXTO2</span>
<span alt="dRag3" style="position:absolute;font-size:1.7em;color:green;">TEXTO3</span>
<span alt="dRag4" style="position:absolute;">TEXTO4</span>
<span alt="dRag5" style="position:absolute;font-size:2em;color:blue;">TEXTO5</span>
<span alt="dRag6" style="position:absolute;font-size:1.3em;color:orange;">TEXTO6</span>
<span alt="dRag7" style="position:absolute;">TEXTO7</span>
<span alt="dRag8" style="position:absolute;font-size:1.5em;color:violet;">TEXTO8</span>
<span alt="dRag9" style="position:absolute;font-size:1em;color:red;">TEXTO9</span>



</body>
</html>

Saludos
:]

delco · #11 (**permalink**) 21/07/2008, 14:25

Hola

Muchas gracias el scritp funciona justo como lo queria jejeje

esta exelente

en agradecimiento a tu ayuda me gustaria ofrecerte un

hosting de 100 mb - 2gb de transferencia mensual - ilimitadas bd mysql - correos ilimitados - Cpanel ,

o

Un Dominio .com - .org o .net

de regalo ambos por un año.

Espero tu respuesta Muchisimas Gracias

marcopoloaz06 · #12 (**permalink**) 21/07/2008, 15:40

ps
no te
preocupes
como dijo MaBoRaK

Cita:

aca te ayudamos ;) para eso estamos.

saludos
XD

delco · #13 (**permalink**) 21/07/2008, 17:49

Muchisimas Gracias

De todas maneras la oferta sigue en pie por si necesitas mas adelante

Gracias por todo, que estes muy bien