Ok je voulais pas arriver la mais bon si tu le demande :)
voila:
// ===================================================================
// Author: Denis Howlett <feedback@isocra.com>
// WWW: http://www.isocra.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however we
// would appreciate it if at least the web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// to the URL instead.
//
// Please DO NOT link directly to this .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================
// la table qui deviendra "dragable"
var currenttable = null;
/**********************************************************
cette methode capture l'evenement de la souris pour voir si un objet dragable de la
table doit (si il existe une table) doit etre bougé ou non.
**********************************************************/
document.onmousemove = function(ev){
// est ce qu'il y a une table pour travailler la dessus? si oui est ce qu'oon a un drag object?
if (currenttable && currenttable.dragObject) {
// on recupere l'evenement (pour le firefox on passe l'evenement en parametre, pour IE on le recupere avec window.event)
ev = ev || window.event;
// on recupere la position de la souris et surtout l'ordonnés pour voir si on monte ou dessend de ligne
var mousePos = currenttable.mouseCoords(ev);
var y = mousePos.y - currenttable.mouseOffset.y;
// on compare avec l'encienne valeur de y pour voir si on a monter ou dessendu la souris
if (y != currenttable.oldY) {
//
var movingDown = y > currenttable.oldY;
// on modifie l'ancienne valeur
currenttable.oldY = y;
// on change de style pour montrer qu'on drag la ligne
currenttable.dragObject.style.backgroundColor = "#eee";
// si on est au dessus d'une ligne, on bouge l'objet pour que l'utilisateur vois l'effet (on ne cherche pas a savoir si la souris est hors du tableau ou non, ce quinous interesse est le Y)
var currentRow = currenttable.findDropTargetRow(y);
if (currentRow) {
//si on bouge la souris vers le bas, on insere en utilisant insertBefore et nextSibling
if (movingDown && currenttable.dragObject != currentRow) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
//si on bouge la souris vers le haut, on insere en utilisant insertBefore seulement
} else if (! movingDown && currenttable.dragObject != currentRow) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
}
}
}
return false;
}
}
/**********************************************************
cette methode nous permet de savoir quand on lache la ligne, tous ce qu'on doit
faire c'est remettre le style comme avant et oublier la table et la ligne
**********************************************************/
document.onmouseup = function(ev){
if (currenttable && currenttable.dragObject) {
var droppedRow = currenttable.dragObject;
// If we have a dragObject, then we need to release it,
// The row will already have been moved to the right place so we just reset stuff
droppedRow.style.backgroundColor = 'transparent';
currenttable.dragObject = null;
// And then call the onDrop method in case anyone wants to do any post processing
currenttable.onDrop(currenttable.table, droppedRow);
currenttable = null; // let go of the table too
}
}
/**********************************************************
cette methode envoi l'element source de
**********************************************************/
function getEventSource(evt) {
if (window.event) {
evt = window.event; // For IE
return evt.srcElement;
} else {
return evt.target; // For Firefox
}
}
/**********************************************************
une classe qui sera créer pour chaque table qu'on aimerai rendre "dragable"
**********************************************************/
function TableDnD() {
// l'objet qui est en train d'etre bougé
this.dragObject = null;
//
this.mouseOffset = null;
// la table courante
this.table = null;
// il faut toujours avoir l'ancienne valeur de Y (ordonnése)
this.oldY = 0;
// Initialise le drag and drop en capturant le mouvement de la souris
this.init = function(table) {
this.table = table;
var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
for (var i=0; i<rows.length; i++) {
var nodrag = rows[i].getAttribute("NoDrag")
if (nodrag == null || nodrag == "undefined") {
this.makeDraggable(rows[i]);
}
}
}
// cette methode est appeler quand on lache la souris, c'est ici qu'on utilisera l'ajax pour mettre a jour la base de données
this.onDrop = function(table, droppedRow) {
// blablabalablabaalbalab
}
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
this.getPosition = function(e){
var left = 0;
var top = 0;
/** Safari fix -- thanks to Luis Chato for this! */
if (e.offsetHeight == 0) {
/** Safari 2 doesn't correctly grab the offsetTop of a table row
this is detailed here:
http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
note that firefox will return a text node as a first child, so designing a more thorough
solution may need to take that into account, for now this seems to work in firefox, safari, ie */
e = e.firstChild; // a table cell
}
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
/** Get the mouse coordinates from the event (allowing for browser differences) */
this.mouseCoords = function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
/** Given a target element and a mouse event, get the mouse offset from that element.
To do this we need the element's position and the mouse position */
this.getMouseOffset = function(target, ev){
ev = ev || window.event;
var docPos = this.getPosition(target);
var mousePos = this.mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
/** Take an item and add an onmousedown method so that we can make it draggable */
this.makeDraggable = function(item) {
if(!item) return;
var self = this; // Keep the context of the TableDnd inside the function
item.onmousedown = function(ev) {
// Need to check to see if we are an input or not, if we are an input, then
// return true to allow normal processing
var target = getEventSource(ev);
if (target.tagName == 'INPUT' || target.tagName == 'SELECT') return true;
currenttable = self;
self.dragObject = this;
self.mouseOffset = self.getMouseOffset(this, ev);
return false;
}
item.style.cursor = "move";
}
/** We're only worried about the y position really, because we can only move rows up and down */
this.findDropTargetRow = function(y) {
var rows = this.table.tBodies[0].rows;
for (var i=0; i<rows.length; i++) {
var row = rows[i];
var nodrop = row.getAttribute("NoDrop");
if (nodrop == null || nodrop == "undefined") {
var rowY = this.getPosition(row).y;
var rowHeight = parseInt(row.offsetHeight)/2;
if (row.offsetHeight == 0) {
rowY = this.getPosition(row.firstChild).y;
rowHeight = parseInt(row.firstChild.offsetHeight)/2;
}
// Because we always have to insert before, we need to offset the height a bit
if ((y > rowY - rowHeight) && (y < (rowY + rowHeight))) {
// that's the row we're over
return row;
}
}
}
return null;
}
}
Appeler une fonction javascript en php
