Drag And Drop avec Mootools

Slt tlm,

je voudrais réaliser un script de Drag and Drop dans le style de Netvibes avec l'aide mootools (et la votre ) !

Je veux rendre les div draggables, et qu'elles prennent la place des div qu'elles survolent! En gros je veux faire exactement ca. C'est un script que j'avais fais a l'époque pour des div qui étaient toutes carrées, donc c'était encore gérable pour moi. Mais là, la hauteur de mes div n'est pas fixe, c'est pourquoi je veux utiliser Mootools.

Pour cela je pense qu'il faut partir de ce script de demo, mais ensuite je sais pas du tout comment le modifier! J'ai essayer de prévoir toutes les combinaisons de drag possible au chargement de la page! Voici le code, qui ne marche pas du tout!

window.addEvent('domready', function(){
 
	var container = $('containment');
	var droppables = new Array();
 
	for(i=1; i<=10; i++){
 
		for(i2=1; i2<=10; i2++){
 
			if(i2 != i)
				droppables[ i][ i2] = $('dropper_'+i2);
 
		}
 
		$('dropper_'+i).addEvent('mousedown', function(){
 
			$('dropper_'+i).makeDraggable({
			'container': container, 
			'droppables': droppables[ i], 
			onStart: function() {
				this.addClass('dragged');
			}.bind($('dropper_'+i)),
			onComplete: function() {
				this.removeClass('dragged');
			}.bind($('dropper_'+i))
 
			})
 
			droppables.addEvent('over', function(){
				this.setStyle('background-color', '#000');
			});
 
			droppables.addEvent('leave', function(){
				this.setStyle('background-color', '#ff3300');
			});
 
			droppables.addEvent('drop', function(){
 
				this.setStyle('background-color', '#face8f');
				position = this.getPosition();
				$('dropper_'+i).setStyles({
					'position':'absolute',
					'top': position.y,
					'left': position.x
				});
 
			});
 
		});
 
	}
 
});

Je sais pas du tout si c'est la bonne manière de le faire, donc je suis ouvert a toute proposition, car la je nage totalement!


Merci bp!
+++
Modifié par maxroucool (24 Mar 2008 - 19:00)

Slt tlm,

je viens de modifier mon script, mais il reste quelques problèmes:
- les option container et droppables ne marches pas
- les évènements onStart, onDrag, et onComplete n'ont pas l'air de marcher non plus

window.addEvent('domready', function(){
 
	var container = $('containment');
	var droppables = new Array();
 
	for(i=1; i<=10; i++){
 
		droppables[ i] = new Array();
		var i3 = 0;
		for(i2=1; i2<=10; i2++){
 
			if(i2 != i){
 
				droppables[ i][i3] = new Array($('dropper_'+i2));
				i3++;
 
			}
 
		}
 
		$('dropper_'+i).makeDraggable('dropper_'+i,{
			'container': container,
			'droppables': droppables[ i],
			onDrag: function() {
				this.style.background = 'blue';
				//this.addClass('dragged');
				//$('dropper_'+i).addClass('dragged');
			},
			onComplete: function() {
				$('dropper_'+i).removeClass('dragged');
			}
 
		});
 
	}
 
});

Si vous avez la moindre idée, je ss tout ouï car la j'ai épuisé toutes mes cartes!


Merci bp!
+++
Modifié par maxroucool (26 Mar 2008 - 15:08)