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,

	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(){ // initialise le système
		var pointer = this;

		// 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;
				DOM.DRAGNDROP.innerHTML = '';
				DOM.DRAGNDROP.appendChild( e.target.cloneNode() );
				DOM.DRAGNDROP.children[0].innerHTML = e.target.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';
				e.target.style.backgroundColor = '#28b965';
				pointer.state = true; 
			}
		}, false);

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

				if( pointer.droppableElements.indexOf(e.target) > -1 ) // si on est sur un "receveur"
					e.target.style.backgroundColor = '#28b965';
				else
					for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
						pointer.droppableElements[i].style.backgroundColor = 'inherit';
			}
		}, false);

		// evenement mouseup
		document.body.addEventListener('mouseup', function(e){
			if( pointer.state ){
				DOM.DRAGNDROP.style.display = 'none';
				pointer.state = false;
				for( var i = 0 ; i < pointer.draggableElements.length ; i++ )
					pointer.draggableElements[i].style.backgroundColor = 'inherit';
				for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
						pointer.droppableElements[i].style.backgroundColor = 'inherit';

				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;
					console.log('Source: '); console.log( pointer.dragElement );
					console.log('Dest. : '); console.log( pointer.dropElement );
				}

			}
		}, false);
		

	}
}