11543 sujets

JavaScript, DOM et API Web HTML5

Prototype-Scriptaculous drag and drop clone du draggable [resolved]

Bonjour,

Je suis nouveau sur ce forum mais pas nouveau en informatique Smiley cligne , je fais appel aux âmes charitables qui passe par là.

Je souhaite faire un compte rendu d'activité avec des noms de clients qui sont déplaçables dans un tableau en suivant le même principe que ce qui est proposé au dessus. Le soucis c'est que le nom du client que je déplace doit pouvoir être placé à différents endroit en même temps, mais pour l'instant pas possible car le nom du client se supprime de la liste.

Plutôt qu'un long discours, voici mon code simplifié: Smiley biggrin

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

	<link rel="stylesheet" href="./style.css" type="text/css" media="screen"/>

	

	<script type="text/javascript" src="./scriptaculous-1.8.3/lib/prototype.js"></script>

	<script type="text/javascript" src="./scriptaculous-1.8.3/src/scriptaculous.js?load=effects,dragdrop"></script>



	<script type="text/javascript" src="./javascript.js"></script>

	

	<title>Test: drag and drop in table</title>

</head>

<body>
</body>

</html>


style.css
.table { margin:0; padding:0; width:70em; font-size:.9em; float:left;}

.petite-ligne{ width:100%; height:22px;}

.ligne{ width:100%; height:52px;}

.cellule { height:50px; width:3.5em; float:left; display:block; }

.cellule-vide { height:20px; width:6em; float:left; display:block; }

.cellule-horaire { height:20px; width:3.5em; float:left; display:block;}

.cellule-date { height:50px; width:6em; float:left; display:block;}

.cellule-content-vide{ height:18px; margin:1px; border:1px solid #CCC; background:#CAF; }

.cellule-content{ height:48px; margin:1px; border:1px solid #CCC; background:#ACF; text-align:center; }

.cellule-content-horaire{ height:18px; margin:1px; border:1px solid #CCC; background:#ACF; text-align:center;}

.cellule-content-date{ height:48px; margin:1px; border:1px solid #CCC; background:#FCA; text-align:center;}

.hover{ border:1px solid #F00; background:#FBB; }



.tableClient { margin:0; padding:0; border:1px solid #CCC; width:11em; font-size:.9em; float:left; margin-left:2em;}

.client{ display:block; border: 1px solid #FFF; background:#333; color:#FFF; height:20px; }


javascript.js
Event.observe(window, 'load', init);

function init() {
	var table = new Element('div',{'class':'table'});

	for (var rows = 0; rows < 32; rows++) {
		if (rows == 0) {
			var ligne = new Element('div',{'class':'petite-ligne'});
		} else {
			var ligne = new Element('div',{'class':'ligne'});

		}

		for (var cols = 0; cols < 19; cols++) {
			if (rows == 0 && cols == 0) {
				var cellule = new Element('div',{'class':'cellule-vide'});
				var cellule_content_vide = new Element('div',{'class':'cellule-content-vide'});
				cellule.insert(cellule_content_vide);
			} else if (rows == 0 && cols != 0) {
				var cellule = new Element('div',{'class':'cellule-horaire'});
				var cellule_content_horaire = new Element('div',{'id': (cols+5)+'h', 'class':'cellule-content-horaire'}).update((cols+5)+'h');
				cellule.insert(cellule_content_horaire);
			} else if (rows != 0 && cols == 0) {
				var cellule = new Element('div',{'class':'cellule-date'});
				var cellule_content_date = new Element('div',{'class':'cellule-content-date'}).update(rows+'/12/1984');
				cellule.insert(cellule_content_date);
			} else {
				var cellule = new Element('div',{'class':'cellule'});
				var cellule_content = new Element('div',{'id':rows+'-'+(cols+5)+'h', 'class':'cellule-content'});
				cellule.insert(cellule_content);
			}
			ligne.insert(cellule);
		}
		table.insert(ligne);
	}

	$(document.body).insert(table);
	
	var tableClient = new Element('div',{'class':'tableClient'});
	var ligneClient = new Element('div',{'class':'ligne'});
	var celluleClient = new Element('div',{'class':'cellule'});
	var client_content = new Element('div',{'class':'cellule-content'});
	var client1 = new Element('div',{'id':'client1', 'class':'client'}).update('client1');
	var client2 = new Element('div',{'class':'client'}).update('client2');

	client_content.insert(client1);
	client_content.insert(client2);
	celluleClient.insert(client_content);
	ligneClient.insert(celluleClient);
	tableClient.insert(ligneClient);
	$(document.body).insert(tableClient);
	
	
	
	$$("div.cellule-content").each(function(el){
		Droppables.add(el,{
					'accept':	'client',
					'onDrop':	updateEventCram,
					'hoverclass':	'hover'
				});
		});

	$$("div.client").each(function(el){
			new Draggable(el, {
					'ghosting':	false,
					'revert':	function(eventA) {
								eventA.style.left = '0px';
								eventA.style.top = '0px';
        						},
					'onStart': function(obj,mouse){ 
							obj.element.parentNode.style.zIndex=1;}
					});
		});
}

function updateEventCram(dragEl, dropEl, event){
	dragEl.parentNode.style.zIndex=0;
	dropEl.insert({bottom:dragEl});
}


En clair je voudrais pouvoir cliquer glisser "client1" dans la liste et quand je le lâche ça me créé une nouvelle instance de ce nom de client. Et quand je clique et glisse cette nouvelle instance vers une autre cellule ça doit pas créer de nouvelles instance. Smiley sweatdrop
J'espère être clair Smiley confused
Modifié par jmpicot (04 Jan 2010 - 17:49)
Bon finalement j'ai trouvé une solution tout seul. Je vous la poste histoire de partager.

De plus vous trouverez le code modifié et légèrement amélioré car il y a plus de fonctionnalités.
-> Double clique sur le client ajouté dans le planning pour lui ajouter un commentaire qui vient se mettre en attribut de la div (de l'élément draggable), à vous de faire un petit script pour récupérer ce comm en vue de le sauvegarder.
-> Ajout d'une poubelle sur la droite (fond gris) où vous déplacer les clients du planning pour les supprimer.

Tout le code HTML est généré avec javascript, c'est pas beau mais pas eu le temps de faire mieux. Smiley confused

Pour le moment je n'ai testé que sur FireFox, il se peut que ça bug sur d'autres navigateurs.

Donc le index.html n'a pas changé.

le style.css devient ceci:
.table { margin:0; padding:0; width:70em; font-size:.9em; float:left;} 
 
.petite-ligne{ width:100%; height:22px;} 
 
.ligne{ width:100%; height:52px;} 
 
.cellule { height:50px; width:3.5em; float:left; display:block; } 
 
.cellule-vide { height:20px; width:6em; float:left; display:block; } 
 
.cellule-horaire { height:20px; width:3.5em; float:left; display:block;} 
 
.cellule-date { height:50px; width:6em; float:left; display:block;} 
 
.cellule-poubelle { height:50px; width:100%; float:left; display:block; } 

.cellule-content-vide{ height:18px; margin:1px; border:1px solid #CCC; background:#CAF; } 
 
.cellule-content{ height:48px; margin:1px; border:1px solid #CCC; background:#ACF; text-align:center; } 

.cellule-content-poubelle{ height:48px; margin:1px; background:#CCCCCC; text-align:center; } 
 
.cellule-content-horaire{ height:18px; margin:1px; border:1px solid #CCC; background:#ACF; text-align:center;} 
 
.cellule-content-date{ height:48px; margin:1px; border:1px solid #CCC; background:#FCA; text-align:center;} 
 
.hover{ border:1px solid #F00; background:#FBB; } 
 
 
 
.tableClient { margin:0; padding:0; border:1px solid #CCC; width:11em; font-size:.9em; float:left; margin-left:2em;} 
 
.tablePoubelle { margin-top:2em; padding:0; border:1px solid red; width:11em; font-size:.9em; float:left; margin-left:2em;} 

.client, .clientPlace{ display:block; border: 1px solid #FFF; background:#333; color:#FFF; height:20px; }


Le javascript.js devient:
Event.observe(window, 'load', init); 
 
function init() { 
    var table = new Element('div',{'class':'table'}); 
 
    for (var rows = 0; rows < 32; rows++) { 
        if (rows == 0) { 
            var ligne = new Element('div',{'class':'petite-ligne'}); 
        } else { 
            var ligne = new Element('div',{'class':'ligne'}); 
 
        } 
 
        for (var cols = 0; cols < 19; cols++) { 
            if (rows == 0 && cols == 0) { 
                var cellule = new Element('div',{'class':'cellule-vide'}); 
                var cellule_content_vide = new Element('div',{'class':'cellule-content-vide'}); 
                cellule.insert(cellule_content_vide); 
            } else if (rows == 0 && cols != 0) { 
                var cellule = new Element('div',{'class':'cellule-horaire'}); 
                var cellule_content_horaire = new Element('div',{'id': (cols+5)+'h', 'class':'cellule-content-horaire'}).update((cols+5)+'h'); 
                cellule.insert(cellule_content_horaire); 
            } else if (rows != 0 && cols == 0) { 
                var cellule = new Element('div',{'class':'cellule-date'}); 
                var cellule_content_date = new Element('div',{'class':'cellule-content-date'}).update(rows+'/12/1984'); 
                cellule.insert(cellule_content_date); 
            } else { 
                var cellule = new Element('div',{'class':'cellule'}); 
                var cellule_content = new Element('div',{'id':rows+'-'+(cols+5)+'h', 'class':'cellule-content'}); 
                cellule.insert(cellule_content); 
            } 
            ligne.insert(cellule); 
        } 
        table.insert(ligne); 
    } 
 
    $(document.body).insert(table); 
     
    var tableClient = new Element('div',{'class':'tableClient'}); 
    var ligneClient = new Element('div',{'class':'ligne'}); 
    var celluleClient = new Element('div',{'class':'cellule'}); 
    var client_content = new Element('div',{'class':'cellule'}); 
    var client1 = new Element('div',{'id':'client1', 'class':'client'}).update('client1'); 
    var client2 = new Element('div',{'id':'client2', 'class':'client'}).update('client2'); 
 
    client_content.insert(client1); 
    client_content.insert(client2); 
    celluleClient.insert(client_content); 
    ligneClient.insert(celluleClient); 
    tableClient.insert(ligneClient); 
    $(document.body).insert(tableClient); 
     
     
     
    $$("div.cellule-content").each(function(el){ 
        Droppables.add(el,{ 
                    'accept':    new Array('client', 'clientPlace'),
                    'onDrop':    updateEventCram, 
                    'hoverclass':    'hover' 
			}); 
	}); 
 
    $$("div.client").each(function(el){ 
		new Draggable(el, { 
				'ghosting':    true, 
				'revert':    function(eventA) { 
							eventA.style.left = '0px'; 
							eventA.style.top = '0px'; 
							}, 
				'onStart': function(obj,mouse){  
						obj.element.parentNode.style.zIndex=1;} 
		}); 
	});

	ajouterPoubelle();	
} 
 
function ajouterPoubelle() {
	var tablePoubelle = new Element('div',{'class':'tablePoubelle'}); 
    var lignePoubelle = new Element('div',{'class':'ligne'}); 
    var cellulePoubelle = new Element('div',{'class':'cellule-poubelle'}); 
    var poubelle_content = new Element('div',{'class':'cellule-content-poubelle'}); 
    
	cellulePoubelle.insert(poubelle_content); 
    lignePoubelle.insert(cellulePoubelle); 
    tablePoubelle.insert(lignePoubelle); 
    $(document.body).insert(tablePoubelle); 
	
	$$("div.cellule-content-poubelle").each(function(el){ 
        Droppables.add(el,{ 
				'accept':    'clientPlace', 
				'onDrop':    updateEventTrash, 
                'hoverclass':    'hover' 
		}); 
	}); 
} 

 
function updateEventCram(dragEl, dropEl, event){ 
    dragEl.parentNode.style.zIndex=0;
	var nameDragEl = getAttribute(dragEl, 'name');
	
	if (dropEl.innerHTML.indexOf(dragEl.innerHTML + '/' + dropEl.id) == -1) {
		if (nameDragEl == 'clientPlace') {
			dragEl.id = dragEl.innerHTML + '/' + dropEl.id;
			dropEl.insert({bottom:dragEl});
		} else {
			var newElt = getNouveauClientAPlacer(dragEl, dropEl);
			ajouterDraggable(newElt);
			dropEl.insert({bottom:newElt}); 
		}
	}
}

function getNouveauClientAPlacer(dragEl, dropEl) {
	return new Element('div', {'id': dragEl.innerHTML + '/' + dropEl.id, 'name': 'clientPlace', 'class': 'clientPlace', 'ondblclick': 'getCommentaires(this)' }).update(dragEl.innerHTML);	
}

function getCommentaires(elt) {
	var oldValue = getAttribute(elt, 'commentaires');
	var newValue = prompt('Commentaires', oldValue);
	var attribut = document.createAttribute('commentaires');
	attribut.value = newValue;
	elt.attributes.setNamedItem(attribut);
}

function updateEventTrash(dragEl, dropEl, event){ 
	dragEl.parentNode.style.zIndex=0;
	dragEl.innerHTML = '';
	dragEl.className = '';
	dropEl.insert({bottom:dragEl});
}

function ajouterDraggable(elt) {
	new Draggable(elt, { 
		'ghosting':    false, 
		'revert':    function(eventA) { 
					eventA.style.left = '0px'; 
					eventA.style.top = '0px'; 
					}, 
		'onStart': function(obj,mouse){  
				obj.element.parentNode.style.zIndex=1;} 
		}); 
}

function getAttribute(elt, nameAttribute) {
	var attribut = elt.attributes.getNamedItem(nameAttribute);
	
	if (attribut == null) {
		return '';
	} else {
		return attribut.value;
	}
}



N'hésitez pas à réagir ou a poser des questions.
Modifié par jmpicot (04 Jan 2010 - 17:48)
Sujet clos
Aller à