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.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 + 'px'; DOM.DRAGNDROP.style.left = e.clientX + 'px'; for( var i = 0 ; i < pointer.droppableElements.length ; i++ ) pointer.droppableElements[i].style.color = '#777'; if( pointer.droppableElements.indexOf(e.target) > -1 ) e.target.style.color = 'red'; } }, 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; console.log('Source: '); console.log( pointer.dragElement ); console.log('Dest. : '); console.log( pointer.dropElement ); } for( var i = 0 ; i < pointer.droppableElements.length ; i++ ) pointer.droppableElements[i].style.color = '#777'; } }, false); } }