TafelTree-view (Javascript)

var tree1 = null;

///

// Fonction de drop

//

// Appelée une fois avant que le drop soit effectif (quand

// finished = false) et une fois après (quand finished vaut

// true)

//

// Retourner true permettra de valider le drop

///

function funcDrop1 (move, drop, finished) {

if (!finished) {

if (confirm('Tu confirmes le drop ?')) {

return true;

} else {

return false;

}

} else {

alert ('Le drop est effectué');

}

}

///

// Génération de l'arbre avec une fonction de drop

///

function TafelTreeInit () {

tree1 = new TafelTree ('drag1', struct1, {

'generate' : true,

'imgBase' : 'imgs/',

'defaultImg' : 'page.gif',

'defaultImgOpen' : 'folderopen.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop1,

'behaviourDrop' : 'child', // child ou sibling

// ou childcopy ou siblingcopy

'dropALT' : true, // defaut : true

'dropCTRL' : true // defaut : true

});

}

///

// Fonction de drop pour l'exemple 2

///

function funcDrop2 (move, drop, finished) {

// On ne vérifie pas le drop. Il se fera quoiqu'il arrive

if (finished) {

var _drag = move.getText();

var _drop = drop.getText();

var _treeMove = move.tree.id;

var _treeDrop = drop.tree.id;

alert ('Droppé ' + _drag + ' (' + _treeMove + ') sur '

+ _drop + ' ('+ _treeDrop + ')');

}

// Ne pas oublier de retourner true, sinon le drop sera

// ineffectif

return true;

}

///

// La génération de tous les arbres se fait dans la fonction

// TafelTreeInit()

///

function TafelTreeInit () {

tree1b = new TafelTree ('drag1b', struct1, {

'generate' : true,

'imgBase' : 'imgs/',

'defaultImg' : 'page.gif',

'defaultImgOpen' : 'folderopen.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop2

});

tree2 = new TafelTree ('drag2', struct2, {

'generate' : true,

'rtlMode' : true, // Pour le fun : right-to-left Mode

'imgBase' : 'imgs/',

'defaultImg' : 'globe.gif',

'defaultImgOpen' : 'imgfolder.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop2,

'bind' : [tree1]

});

}

///

// Fonction de drop pour l'exemple de copie

///

function funcDropCopy (move, drop, finished, copy) {

// On attend que le drop soit fait. On récupère la branche

// copiée et on lui change son texte

if (finished) {

if (copy) {

// Dans ce cas précis, on ne s'occupe pas des

// enfants, mais uniquement de la branche droppée

copy.setText(move.getText() + " copiée");

}

}

return true;

}

///

// La génération de l'arbre dans TafelTreeInit()

///

function TafelTreeInit () {

treeCopy = new TafelTree ("dragCopy", structCopy, {

"generate" : true,

"imgBase" : "imgs/",

"defaultImg" : "page.gif",

"defaultImgOpen" : "folderopen.gif",

"defaultImgClose" : "folder.gif",

"onDrop" : funcDropCopy,

"behaviourDrop" : "childcopy"

});

}

<?php

$okDrop = false;

$msg = 'Erreur dans POST';

// On vérifie qu'il y a bien quelque chose qui vient

// de la page en POST

// Les variables disponibles sont :

// - drag = JSON de la branche qui a bougé

// - drop = JSON de la branche sur laquelle on a déposé le drag

// - drag_id = id de la branche qui a bougé

// - drop_id = id de la branche sur laquelle on a déposé le drag_id

// - treedrag_id = id de l'arbre d'où est tiré la branche qui a bougé

// - treedrop_id = id de l'arbre qui accueille la branche qui a bougé

// - sibling = 0 si on le drop comme fils, 1 s'il est comme frère

if (isset($_POST['drop'])) {

// Toutes les variables viennent en POST. Pas

// de GET ici

// Récupération des ids (élément drag et drop)

$dragID = $_POST['drag_id'];

$dropID = $_POST['drop_id'];

// On peut vérifier s'il s'agit d'un drop "as

// sibling" ou "as child"

if (!$_POST['sibling']){

// Droppé comme nouvelle fille

// check si on peut faire le drop ou non

$okDrop = true;

$msg = 'Tout est ok';

} else {

// Droppé comme nouvelle soeur (même niveau)

// check si on peut faire le drop ou non

$okDrop = false;

$msg = 'On ne drop pas comme soeur!';

}

}

// Ici, on renvoie un objet JSON (carrément!). Il faut

// savoir que la réponse peut être absolument n'importe

// quoi. Il faut juste la traiter comme il faut en

// Javascript après...

if ($okDrop) {

echo "({";

echo "'ok' : true,";

echo "'msg' : '".$msg."'";

echo "})";

} else {

echo "({";

echo "'ok' : false,";

echo "'msg' : '".$msg."'";

echo "})";

}

?>

// Fonction de drop Ajax

function funcDrop3 (move, drop, response, finished) {

// On vérifie avant que le drop soit fait. A ce moment là

// la requête Ajax est effectuée, mais pas le drop.

if (!finished) {

// On évalue la réponse Ajax. L'objet contient donc

// une propriété "ok" et une autre "msg"

var obj = eval(response);

if (!obj.ok) {

alert ('Problème : ' + obj.msg);

return false;

}

}

return true;

}

///

// Génération de l'arbre avec une fonction de drop

///

function TafelTreeInit () {

tree3 = new TafelTree ('drag3', struct3, {

'generate' : true,

'imgBase' : 'imgs/',

'defaultImg' : 'page.gif',

'defaultImgOpen' : 'folderopen.gif',

'defaultImgClose' : 'folder.gif',

'onDropAjax' : [funcDrop3, 'server/sampleDrop1.php']

});

}