sid/js/dragndrop.js

103 lines
3.4 KiB
JavaScript
Raw Normal View History

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);
}
}