93 lines
3.3 KiB
JavaScript
93 lines
3.3 KiB
JavaScript
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);
|
|
|
|
|
|
}
|
|
} |