enrichissement/application/views/scripts/profil/detail.phtml

<style>
div#entete {
	width:45%;
	float:left;
	border:1px solid #bebebe;
	height:400px;
	overflow:auto;
	margin:5px 0;
}

div#entete li {
	background-color:#4D90FE; 
	border-top:2px solid #ffffff;
	border-bottom:2px solid #ffffff;
	line-height:20px;
	font-weight:bold;
	color:#000000;
	margin-left:30px;
	padding-left:10px;
}

div#dico {
	width:45%;
	height:400px;
	float:right;
	border:1px solid #bebebe;
	overflow:auto;
	margin:5px 0;
}

div#dico li {
	list-style-type:none;
	padding-left:10px;
	background-color:#4D90FE; 
	border-top:2px solid #ffffff;
	border-bottom:2px solid #ffffff;
	line-height:20px;
	font-weight:bold;
	color:#000000;
}

</style>

<div id="entete">
	<h1 class="ui-widget-header">Entete</h1>
	<div class="ui-widget-content">
		<ol>
			<span class="placeholder">Placer les elements ici</span>
		</ol>
	</div>	
</div>

<div id="dico">
<h1 class="ui-widget-header">Elements disponibles</h1>	
<ul>
<?php foreach($this->elements as $key => $element) {?>
	<li id="<?=$key?>">
	<?php if (isset($element['lib'])) { echo $element['lib']; } else { echo $key; }?>
	<?php if (isset($element['values'])) { echo "<input type=\"text\" name=\"".$key."\" value=\"\"/>"; }?>
	</li>
<?php }?>
</ul>
</div>

<div style="clear:both;">
Référence <input type="text" name="profil" value="" />
<a id="save" href="<?=$this->url(array('controller'=>'profil', 'action'=>'save'))?>">Sauvegarder</a>
</div>

<script>
$(function() {
	$("#dico li").draggable({
		appendTo: "body",
		helper: "clone"
	});
	$("#entete ol").droppable({
		activeClass: "ui-state-default",
		hoverClass: "ui-state-hover",
		accept: ":not(.ui-sortable-helper)",
		drop: function( event, ui ) {
			$( this ).find( ".placeholder" ).remove();			
			var id = ui.draggable.attr('id');
			$('<li id="'+id+'"></li>').html( ui.draggable.html() ).appendTo( this );
		}
	}).sortable({
		items: "li:not(.placeholder)",
		sort: function() {
			$( this ).removeClass( "ui-state-default" );
		}
	});

	$("#entete").delegate("a.delete","click", function(){
		$(this).parent().remove();
	});
	
	$("#entete ol").delegate("li" , "hover", function(e) {
		if (e.type === 'mouseenter') {
			var html = $(this).html(); 
			$(this).html(html+'<a href="#" class="delete">Supprimer</a>');
		} else {
			$( this ).find( ".delete" ).remove(); 
		}
	});
	
	$('#save').click(function(e){
		e.preventDefault();
		var url = $(this).attr('href');
		var list = new Array();
		$('#entete ol li').each(function(index){		
			var id = $(this).attr('id');
			if($('input[name='+id+']', this).length>0){
				id = id + '(' + $('input[name='+id+']', this).val() + ')';	
			}
			list.push(id);
		});
		var ref = $('input[name=profil]').val();
		if (ref!='') {
			$.post(url, { reference: ref, criteres: list.join() }, function(data){
				if (data!='Erreur'){ window.location.href = '/'; }
			}, 'json');
		}	
	});
	
});
</script>