11524 sujets

JavaScript, DOM et API Web HTML5

Prototype-Scriptaculous drag and drop dans un table [resolved]

Salut,

Je suis sur un projet type agenda. Pour cela j'utilise les librairies Prototype et celles de Scriptaculous. Mais j'ai un souci de zindex avec mes éléments draggables.

Pour représenter les jours je créé des cellules dans un table, puis je les remplis avec les évènements correspondants. Je souhaite, comme à la manière de l'agenda du moteur de recherche bien connu, offrir la possibilité de déplacer un évènement sur un autre jour.

Les cellules sont donc toutes dropables et acceptent des éléments de type évènement. Et les évènements sont bien sûr déplaçables.

Seulement lorsque je déplace un évènement à partir d'une cellule donnée, l'événement en déplacement n'est pas au dessus de toute les cellules.
En effet pour toutes les cellules créent après celle de l'évènement concerné, au moment du drag l'évènement se retrouvent en-dessous des cellules.

En gros, si je drag un événement à partir de la première cellule du table, celui-ci disparaitra sous toutes les autres cellules.

Sous FF, je n'ai aucun problème, c'est seulement une réaction de IE.
Je n'arrive pas trop à comprendre, le z-index de événement passe bien à 1000 et la position devient absolute Smiley confus quelqu'un pourrait-il m'aider?
Modifié par Glopp (10 Apr 2009 - 12:35)
Je vais faire un code simplifié car si je mets les .js et .css à plusieurs centaine/milier de ligne de code, ça risque d'en rebuter plus d'un Smiley cligne
Modifié par Glopp (09 Apr 2009 - 14:55)
Voila le code minimal.

Donc pour ceux qui testerons, vous verez tout de suite que cela ne va pas sous IE (sans parler du lag affreux).


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="./css/styles.css" type="text/css" media="screen"/>
	
	<script type="text/javascript" src="./lib/prototype.js"></script>
	<script type="text/javascript" src="./lib/scriptaculous.js?load=effects,dragdrop"></script>

	<script type="text/javascript" src="./scripts/javascript.js"></script>
	
	<title>Test: drag and drop in table</title>
</head>
<body>
</body>
</html>


styles.css:
table
	{
	margin:0;
	padding:0;
	border:1px solid #CCC;
	width:100%;
        border-spacing:2px;
        table-layout:fixed;
	}

td
	{
	border:1px solid #CCC;
	background:#ACF;
	line-height:20px;
	text-align:center;
	vertical-align:top;
	}

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

tr
	{
	height:60px;
	}

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


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

function init(){



	var table = new Element('table');
	
	var tbody = new Element('tbody');

	for(var rows = 0; rows < 5; rows++) {
			
		var tr = new Element('tr');

		for(var cols = 0; cols < 10; cols++) {

			var td = new Element('td');

			Droppables.add(td,{
					'accept':	'eventAgenda',
					'onDrop':	updateEventAgenda,
					'hoverclass':	'hover'	
				});

				var eventAgenda = new Element('div',{'class':'eventAgenda'}).update('event');

				new Draggable(eventAgenda, {
					'ghosting':	true,
					'revert':	function(eventA) {
								eventA.style.left = '0px';
								eventA.style.top = '0px';
        						}
					});

				td.insert(eventAgenda);

			tr.insert(td);

		}
		
		tbody.insert(tr);

	}


	table.insert(tbody);
	


	$(document.body).insert(table);
}

function updateEventAgenda(eventA, td, event){

	td.insert(eventA);

}


ajouter le onstart au new draggable et la remise à zero du zindex de l'eventA a l'appel de updateEventAgenda.
Modifié par Glopp (10 Apr 2009 - 12:30)
Petite remarque au passage:

J'ai donc mis un div 'eventAgenda' dans chaque cellule du tableau, ces div sont déplaçables et peuvent être insérées dans une autre cellule (il suffit de les glisser).
Re,

alors j'ai bien chercher et parfois je me demande pourquoi je fais tout ça.....

plusieurs choses :

- FF est trop gentil...
- le problème sous IE c'est qu'il semblerait que lorsque tu drag un element, celui ci est visible que dans sont parent.
- deuxieme probleme, le ghosting ne fonctionne pas dans la version de aculo.us que j'ai.
la cause est simple il essaye de faire un delete sur un attribute (fonctionne pas sur ie). Cela sera peut etre corrigé dans une new version, j'ai pas eu le temps de telecharger la derniere version pr verifier...

En ce qui concerne ton code, tu m'excuseras je l'ai un peux changer.....

voici ton styles.css
div.td{
	border:1px solid #CCC;
	background:#ACF;
	line-height:20px;
	text-align:center;
	vertical-align:top;
	float:left;
	width:100px;
	height:100px;
}



div.hover{
	border:1px solid #F00;
	background:#FBB;
}
div.eventAgenda
{
	width:100px;
	height:21px;
	border: 1px solid #FFF;
	background:#333;
	color:#FFF;
	height:20px;
}


et voici ton javascript.js

Event.observe(window, 'load', init);
function init(){
	var table = new Element('table');
	var tbody = new Element('tbody');
	for(var rows = 0; rows < 5; rows++) {
		for(var cols = 0; cols < 10; cols++) {
		
			var td = new Element('div',{'class':'td'});
			var eventAgenda = new Element('div',{'class':'eventAgenda'}).update('event');
			td.insert(eventAgenda);
			$(document.body).insert(td);
		}
	
	}
	$$("div.td").each(function(el){
		Droppables.add(el,{
					'accept':	'eventAgenda',
					'onDrop':	updateEventAgenda,
					'hoverclass':	'hover'
				});
		});
		
	$$("div.eventAgenda").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=1000;}

					});
		});
}

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



dans le cas ou la derniere version de scriptAculo n'as pas corrigé le probleme de ghosting

il faudrait remplacé la ligne 
delete this.element._originallyAbsolute;

par 
this.element._originallyAbsolute = null;

ou 
this.element.removeAttribute('_originallyAbsolute');


je te conseil néanmoins de faire ca proproment.....

je compte sur toi pr faire un retour....


le ghosting fonctionne sur IE6,IE7 et FF avec la version "script.aculo.us 1.8.2" je viens de faire le test...
Modifié par blackkus (09 Apr 2009 - 18:40)
Salut,

Merci pour ta réponse.

Donc oui je confirme, le ghosting fonctionne correctement avec la version 1.8.2 de scriptaculous, du moins sur IE 6 et 7 (antérieurs et 8 non testé).

Pour le code, je suis aussi parti sur cette idée, soit faire un tableau qu'avec des div. Ce que je cherche a faire donc c'est un tableau extensible en largeur.

Ici avec ton code la largeur des td est fixée hors j'aimerais avoir une div table à 100% et que mes td s'adaptent dynamiquement à toute la largeur du table (par exemple toujours 10 td par ligne et td proportionnel au table donc 10% en largeur).

Dans mon cas il me faudra toujours 7 div par ligne donc je pourrais éventuellement mettre width: 15% dans le css des td mais franchement c'est très crade et en plus 15% c'est seulement une approximation de 100/7.

Des idées?
Salut,

je n'aime pas trop les table tr td ..

en ce qui concerne le code que je t'ai fournie, les point important était la résolution du zindex, je suppose que c'est bon....

En ce qui concerne ta nouvelle demande :
tu pourrais faire une classe css ligne genre :

.ligne
{
	clear:both;
	width:100%;
}


qui te servirai de "TR"

en ce qui concerne ta dive "table" défini ton 100%, est voici pourquoi :

Qui sont les utilisateur?
Quelles est la largeur min et la largeur max de la fenetre?
Peux tu garantir que tout tes utilisateurs auront un ecran avec une résolution correct?
Qu'est ce qui t'empêche de mettre une taille qui tourne autour de 960px voir 990px comme sur ce forum?
sinon utilise ton pourcentage ( 100/7 = 14.286 environ, prend plutot 14 et pas 15.....)

Clos peut etre le post maintenant que c'est résolue Smiley cligne
Re,

Arf je suis un boulet Smiley eek , boulet car je n'avais pas vu que tu modifiais le z-index du parent de l'élément glissé (j'ai cru voir que tu le modifiais sur l'élément lui même... ).

Donc oui le zindex marche maintenant et mieux je n'ai pas a tout modifier mes scripts pour l'adapter à des div Smiley biggrin .

Sinon pour le width du tableau en div je voulais qu'il soit extensible (cahier des charges oblige), alors j'ai bossé dessus ce matin et j'y suis finalement arrivé (testé sous FF3 et IE7 pour le moment):


Le .js

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

function init(){

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

	for(var rows = 0; rows < 6; rows++) {

		var tr = new Element('div',{'class':'tr'});

		for(var cols = 0; cols < 7; cols++) {

			var td = new Element('div',{'class':'td'});

			if ((cols == 6) && (Prototype.Browser.IE))
				var td = new Element('div',{'class':'td-end-ie'});

			var td_content = new Element('div',{'class':'td-content'});

			var eventAgenda = new Element('div',{'class':'eventAgenda'}).update('event');

			td_content.insert(eventAgenda);

			td.insert(td_content);

			tr.insert(td);

		}
		
		table.insert(tr);
	}


	$(document.body).insert(table);

	$$("div.td-content").each(function(el){

		Droppables.add(el,{

					'accept':	'eventAgenda',

					'onDrop':	updateEventAgenda,

					'hoverclass':	'hover'

				});

		});

		

	$$("div.eventAgenda").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 updateEventAgenda(dragEl, dropEl, event){

	dragEl.parentNode.style.zIndex=0;

	dropEl.insert({bottom:dragEl});

}


le .css

.table

	{
	margin:0;
	padding:0;
	border:1px solid #CCC;
	width:100%;
	
	}


.td
	{
	height:98px;
	width:14.275%;
	float:left;
	display:block;
	}

.td-end-ie

	{
	height:98px;
	width:auto;
	display:block;
	}


.td-content
	{
	height:96px;
	margin:1px;
	border:1px solid #CCC;
	background:#ACF;
	text-align:center;

	}




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

.tr
	{
	width:100%;
	height:100px;
	}



.eventAgenda

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


Donc les deux méthodes sont possible div ou tableau. Cependant le code avec un tableau me paraît plus rapide, plus visible et surtout ne fait pas intervenir un énième hack pour IE Smiley murf
Sujet clos
Aller à