|
|
|
|
Configuration: Windows XP Internet Explorer 6.0
Bonjour,
Pourrais-t-on voir le code source de ton fichier? (du mois la partie "modifier") Bonne journée. |
en fait il est vraiment compliquyé... quand j'appui sur modifier on peut faire du drag & drop sur la table, et donc c'est la methode init que je souhaite arreter...
voila la page html: [code] <SCRIPT LANGUAGE="JavaScript" SRC="tablednd.js"></SCRIPT> <script type="text/javascript"> function modifier(id) { var tableDnD = new TableDnD(); tableDnD.init(document.getElementById(id)); } </script> <table id="khara1" border> <tr> <td>Task 1</td> <td>Step 1-1</td> </tr> <tr> <td>Task 2</td> <td> <table id="khara2" border> <tr> <td>Step 2-1</td> </tr> <tr> <td>Step 2-2</td> </tr> <tr> <td>Step 2-3</td> </tr> </table> </td> </tr> </table> <input type="button" value="modifier" onclick="modifier('khara1');"> <input type="button" value="valider" onclick=""> /code |
Peux-tu aussi mettre la source de tablednd.js?
Merci |
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; } } |
Pas moyen de trouver une solution pour le moment, peut-être en faisant en sorte que le khara1 dans <table> change lors du chargement de la page (avec une balide <body onload="..."> on met khara1 et avec le bouton balider; on change la valeur ? |
mais y'a aucun moyen en java script de faire function.break() ou qlq chose comme ça? |
je relance, svp aidez moi... |