sid/js/dragndrop.js

function DragnDrop(){};

DragnDrop.prototype = {
	draggableElements: [], // contiendra les élément déplaçables
	droppableElements: [], // contiendra les éléménts acceptant
	state: false,
	dragElement: null,
	dropElement: null,
	dropColors: [], // contiendra la valeur de départ de éléments acceptant
	handler: null,

	absoluteOffset: function(element){ // retourne les offsets absolus de l'élément (absolus = par rapport à la page)
		if( element != document.body ){
			var parent = this.absoluteOffset(element.parentNode);
			return {
				top: element.offsetTop+parent.top,
				left: element.offsetLeft+parent.left
			};
		}else
			return {top: 0, left: 0};
	},

	mouseDownEvent: function(event, pointer){ // gestion du clic sur l'élément (pointeur sur this)
		

	},

	setDraggable: function(element){ // ajoute l'élément aux déplaçables et initialise ses évènements
		element.className = (element.className.length==0) ? 'no-select' : element.className+' no-select'; // on bloque la selection dessus
		this.draggableElements.push( element ); // ajout à la listes
	},	

	setDroppable: function(element){ // ajoute l'éléments aux receveurs
		element.className = (element.className.length==0) ? 'no-select' : element.className+' no-select'; // on bloque la selection dessus
		this.droppableElements.push( element ); // ajout à la liste
	},



	init: function(handler){ // initialise le système
		var pointer = this;

		this.handler = handler;


		// on définit la couleur de départ
		for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
			pointer.dropColors[i] = window.getComputedStyle(pointer.droppableElements[i], null).getPropertyValue('color');

		// evenement mousedown
		document.body.addEventListener('mousedown', function(e){
			if( pointer.draggableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables"
				pointer.dragElement = e.target.parentNode;
				DOM.DRAGNDROP.innerHTML = '';
				DOM.DRAGNDROP.appendChild( e.target.parentNode.cloneNode() );
				DOM.DRAGNDROP.children[0].innerHTML = e.target.parentNode.innerHTML;
				DOM.DRAGNDROP.children[0].style.border = '1px solid #aaa';
				DOM.DRAGNDROP.children[0].style.boxShadow = '0 0 10px #ddd';
				DOM.DRAGNDROP.style.top  = e.clientY + 'px';
				DOM.DRAGNDROP.style.left = e.clientX + 'px';
				DOM.DRAGNDROP.style.display = 'block';
				pointer.state = true;
			}
		}, false);

		// evenement mousemove
		document.body.addEventListener('mousemove', function(e){
			if( pointer.state ){
				DOM.DRAGNDROP.style.top  = e.clientY + 3 + 'px';
				DOM.DRAGNDROP.style.left = e.clientX + 3 +'px';

				
				for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
					pointer.droppableElements[i].style.color = pointer.dropColors[i];

				if( pointer.droppableElements.indexOf(e.target) > -1 )
					e.target.style.color = '#777';

			}
		}, false);

		// evenement mouseup
		document.body.addEventListener('mouseup', function(e){
			if( pointer.state ){
				DOM.DRAGNDROP.style.display = 'none';
				pointer.state = false;

				if( pointer.droppableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables" et qu'il est "draggé"
					pointer.dropElement = e.target;
				
					// on exécute le handler avec le drag/drop
					pointer.handler(pointer.dragElement, pointer.dropElement); 
				}

				for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
					pointer.droppableElements[i].style.color = pointer.dropColors[i];

			}
		}, false);
		

	}
}