Guardar cambios en Drag & Drop

jtkm6 · #1 (**permalink**) 23/07/2011, 10:04

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

jtkm6 · #2 (**permalink**) 24/07/2011, 22:30

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>