TafelTree-view (Javascript)

var tree1 = null;

///

// Drop function

//

// Called one time before drop is done (when finished=false)

// and one time after (when finished = true)

//

// Return true validate the drop

///

function funcDrop1 (move, drop, finished) {

if (!finished) {

if (confirm('Confirm drop ?')) {

return true;

} else {

return false;

}

} else {

alert ('Drop is done');

}

}

///

// Tree generation with drop function

///

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 or sibling

// or childcopy or siblingcopy

'dropALT' : true, // defaut : true

'dropCTRL' : true // defaut : true

});

}

///

// Drop function for sample 2

///

function funcDrop2 (move, drop, finished) {

// We don't check the drop. It'll be always done

if (finished) {

var _drag = move.getText();

var _drop = drop.getText();

var _treeMove = move.tree.id;

var _treeDrop = drop.tree.id;

alert ('Dropped ' + _drag + ' (' + _treeMove + ') on '

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

}

// Don't forget to return true. If you don't, drop will

// not be done

return true;

}

///

// All trees generation are made in the TafelTreeInit()

// function

///

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, // Just for fun : right-to-left Mode

'imgBase' : 'imgs/',

'defaultImg' : 'globe.gif',

'defaultImgOpen' : 'imgfolder.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop2,

'bind' : [tree1]

});

}

///

// Drop function for sample copy

///

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

// Get the copied branch as soon as the drop is finished.

// The goal is to change the text of this branch.

if (finished) {

if (copy) {

// In this case, we don't care about children

copy.setText(move.getText() + " copied");

}

}

return true;

}

///

// Tree generation in 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 = 'POST error';

// We check that there's something into the POST var

// Available vars are :

// - drag = JSON description of dragged branch

// - drop = JSON description of dropped-on branch

// - drag_id = dragged branch id

// - drop_id = drop branch id

// - treedrag_id = dragged branch's tree id

// - treedrop_id = drop branch's tree id

// - sibling = 0 if it's a drop "as child", 1 if it's an "as-sibling"

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

// All tree vars are in POST. Nothing in GET, here

// Get dragged and dropped elements ID

$dragID = $_POST['drag_id'];

$dropID = $_POST['drop_id'];

// We can check if it's a drop "as sibling" or "as

// child"

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

// Dropped as a new child

// check if we can validate the drop or not

$okDrop = true;

$msg = 'All is ok';

} else {

// Dropped as new sibling (same level)

// check if we can validate the drop or not

$okDrop = false;

$msg = 'Can t drop as sibling!';

}

}

// Here, we send a JSON object description. This is one

// possibility, but you can send whatever you want. You

// just have to manipulate it the right way in you Javascript

if ($okDrop) {

echo "({";

echo "'ok' : true,";

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

echo "})";

} else {

echo "({";

echo "'ok' : false,";

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

echo "})";

}

?>

// Drop Ajax function

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

// Check before drop is done. At this time, the ajax

// response is done, but not the drop

if (!finished) {

// Evaluate the ajax response. Object contains one

// property "ok" and one other "msg"

var obj = eval(response);

if (!obj.ok) {

alert ('Problem : ' + obj.msg);

return false;

}

}

return true;

}

///

// Tree generation with drop function

///

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']

});

}