Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Guardar cambios en Drag & Drop

Estas en el tema de Guardar cambios en Drag & Drop en el foro de Frameworks JS en Foros del Web. Buenas otra ves estoy en un proyecto con una web que cualquiera que entra en ella puede mover los iconos y esta debiera generar un ...
  #1 (permalink)  
Antiguo 23/07/2011, 11:04
Avatar de jtkm6  
Fecha de Ingreso: abril-2011
Mensajes: 19
Antigüedad: 9 años, 7 meses
Puntos: 1
Pregunta Guardar cambios en Drag & Drop

Buenas otra ves estoy en un proyecto con una web que cualquiera que entra en ella puede mover los iconos y esta debiera generar un cookie donde se almacene la posición donde el usuario dejo el icono....
Hasta el momento solo e logrado que dicho icono se pueda mover pero carezco de conocimiento para la elaboración del cookie y por esto solicito ayuda...

Los plug in que he utilizado son: Jquery 1.6.2.min.js <-- la vercion mas nueva...
Jquery.easydrag.js <-- Para el Drag & Drop


------- He aquí el INDEX.HTML
Código HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pagina de Inicio JTKM6 Beta1</title>
<style type="text/css">
#notas{
Background:yellow;
Padding:10px;
Width:250px;
Border:solid 1px #ccc;
}
</style>
</head>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$("#notas").easydrag();
$("#notas").ondrop();
});
});
</script>
<body>
<div id="notas"><a href="http://jtkm6.dyndns-web.com"> Probando Drag and drop </a></div>
</body>
</html> 
Buscando me encontré con el siguiente código que utiliza el plug-in "jquery.cookie.js"
y este es el codigo:
Código HTML:
<!-- Codigo para la creacion de Cookie -->

// Get items
	function getItems(id)
	{return $('#' + id + '-list').sortable('toArray').join(',');}

// Load items from cookie
	function loadItemsFromCookie(name)
	{if ( $.cookie(name) != null )
	{renderItems($.cookie(name));}
	else{alert('Cookie "' + name + '" is not set');}
	}

// Render items
	function renderItems(id, itemStr)
	{var list = $('#' + id + '-list');var items = itemStr.split(',')
    for ( var i in items )
		{html = '<li class="sortable-item';
    if ( id == 'splash' )
	{html += ' col3 left';}
	html += '" id="' + items[i] + '"><div class="loader"></div></li>';list.append(html);

// Load html file
	$('#' + items[i]).load('content/' + items[i] + '.html');}	
	}

// Load items from cookie or defaults
	var defaults = [];
	
	defaults['splash'] = 'mission,event,follow';

	var splashSource = ( $.cookie('splash-cookie') == null ) ? defaults['splash'] : $.cookie('splash-cookie');
	renderItems('splash', splashSource);
Pero les ruego me ayuden a adaptarlo para que me funcione!!! ya que en el mundo del diseño web soy un novato

Última edición por jtkm6; 23/07/2011 a las 22:23 Razón: Modificacion
  #2 (permalink)  
Antiguo 24/07/2011, 23:30
Avatar de jtkm6  
Fecha de Ingreso: abril-2011
Mensajes: 19
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Guardar cambios en Drag & Drop

Encontré este código en una pagina aquí del foro pero la cookie no se guarda????
Ayúdenme por favor....


Código HTML:
<html>
<head>
<title> </title>
 <script type="text/javascript" src="js/jquery-latest.pack.js"></script>
 <script type="text/javascript" src="js/ui.core.js"></script>
 <script type="text/javascript" src="js/ui.draggable.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.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> 

Etiquetas: cookie, drag, drop, javascript, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:01.