dynamicinternet Wir machen Ihr Web dynamisch!

Ext Tree Drag and Drop

geschrieben von Micha am 28. Juni 2007 | 2 Kommentare

Drag & Drop ermöglicht Interaktivität, die moderne Webanwendungen auszeichnet. Selbstverständlich bietet die Ext Library Drag & Drop in vielen Widgets an.
Heute wollen wir Drag & Drop mit dem Ext Tree lernen.

In meinem Tutorial Ext Tree Basics haben wir die Grundlagen der Programmierung eines Ext Trees gelernt. Wenn du dieses Tutorial noch nicht gelesen hast, hole es schnell nach, da das heutige Tutorial darauf aufbaut und den selben Code verwenden wird.

Voraussetzungen: Grundkenntnisse in HTML, CSS und Javascript.

Dieses Tutorial basiert auf der Version Ext-1.0, die aktuelle Version kann hier heruntergeladen werden.

Vorbereitung

Am besten ihr kopiert das basic-tree.js und die basic-tree.html und speichert beide Dateien unter anderem Namen ab.

Ein paar Änderungen müssen wir trotzdem durchführen. Wir löschen aus der Javascript Datei die Zeile myTree.on(‘click’, alertID); und ebenfalls die komplette Funktion function alertID(node).
In der HTML Datei müssen wir auch ein paar kleine Änderungen durchführen. Wir brauchen ein zweites Div für den Drop Tree:

<div id="wrapper">
	<div id="tree-div"></div>
	<div id="drop-div"></div>
</div>

// zum style hinzufügen
#tree-div{float:left;width: 300px; height: 300px;border:2px solid #B2D0F7;overflow:auto;}
#drop-div{float:right;width: 300px; height: 300px;border:2px solid #B2D0F7;overflow:auto;}
#wrapper{width:650px;}

Asserdem wollen wir in diesem Beispiel nicht, daß komplette Gruppen verschoben werden, sondern nur einzelne Musiker. Dazu fügen wir bei Pink Floyd und den Rolling Stones hinter der id allowDrag:false, ein.
Ihr seht, wie einfach es ist, solche grundlegenden Sachen per config festzulegen.

Der Drop Tree

Wir haben in der HTML den Container drop-div angelegt, in den wir den Drop Tree, also das Ziel, hineinpacken.
In der Javascript Datei fügen wir unter den Zeilen von myTree den Drop Tree ein:

var dropTree = new Tree.TreePanel('drop-div', {
	animate:true,
	enableDD:true,
	containerScroll: true,
	lines:false,
	rootVisible:true
});

var dropRoot = new Tree.TreeNode({
	allowDrag:false,
	allowDrop:true,
	id:'dRoot',
	text:'Meine liebsten Musiker'
});

dropTree.setRootNode(dropRoot);
dropTree.render();
dropRoot.expand(false, false);

Der Drop Tree sieht fast genau so aus wie der myTree, nur mit dem Unterschied, daß wir dem TreePanel mit enableDD Drag&Drop einschalten und der dropRoot mit allowDrop:true das Ablegen von Treenodes erlauben. Das war schon alles. Den Rest macht die Ext Library.
Wenn ihr nun die HTML Datei ausführt, könnt ihr Shakira oder die anderen Musiker in den Drop Tree ziehen.

Ein Tree Node kopieren

Es kann je nach Anwendung der Fall sein, daß ihr beim Einfügen in den Drop Tree keine Verschiebung des Tree Nodes haben möchtet, sondern eine Kopie. Um das zu realisieren, brauchen wir nichts weiter als eine Funktion schreiben, die das gewünschte Node mit samt seinen Attributen kopiert.
Damit die Funktion auch klappt, muß es natürlich passieren, bevor das Node losgelassen wird. Dafür gibt es das beforenodedrop Event.

dropTree.on('beforenodedrop', function(e){
	var n = e.dropNode;
	var copy = new Tree.TreeNode(Ext.apply({}, n.attributes));
	e.dropNode = copy;
	return true;
});

Jetzt könnt ihr einzelne Musiker in den anderen Tree ziehen und habt eine Kopie. Auch die Attribute, wie der QuickTip, wurden übergeben. Bei Davis Gilmour könnt ihr es sehen, es wird ebenfalls wieder Gitarre,Gesang angezeigt.

Hier der komplette Javascript Code aus diesem Tutorial:

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "yourPathTo/ext-1.0/resources/images/default/s.gif";
	Ext.QuickTips.init();
	var Tree = Ext.tree;

	var myTree = new Tree.TreePanel('tree-div', {
		loader: new Tree.TreeLoader(),
		containerScroll: true,
		animate:true,
		enableDrag:true,
		rootVisible:true
	});

	var Rroot = new Tree.AsyncTreeNode({
		text: 'Rockstars',
		id:'rockstars',
		draggable:false,
		children: [
			{text: 'Pink Floyd', id:'rock-1', allowDrag:false ,children: [
				{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
				{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
				{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
			]},
			{text: 'Rolling Stones', id:'rock-2',allowDrag:false, children: [
				{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
				{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
				{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
				{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
			]},
			{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
			{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
		]
	});
	myTree.setRootNode(Rroot);
	myTree.render();
	myTree.expandAll();
	myTree.on('contextmenu', prepareMenu);

	var dropTree = new Tree.TreePanel('drop-div', {
        animate:true,
        enableDD:true,
        containerScroll: true,
        lines:false,
        rootVisible:true
    });

    var dropRoot = new Tree.TreeNode({
        allowDrag:false,
        allowDrop:true,
        id:'dRoot',
        text:'Meine liebsten Musiker'
    });

    dropTree.setRootNode(dropRoot);
    dropTree.render();
    dropRoot.expand(false, false);

	dropTree.on('beforenodedrop', function(e){
		var n = e.dropNode;
		var copy = new Tree.TreeNode(Ext.apply({}, n.attributes));
		e.dropNode = copy;
		return true;
	});

	var sm = myTree.getSelectionModel();

	var Menu = new Ext.menu.Menu({
        id:'menu',
        items: [{
                id:'expand',
                handler:expandAll,
                cls:'expand',
                text:'ausklappen/expand'
            },{
                id:'collapse',
                handler:collapseAll,
                cls:'collapse',
                text:'einklappen/collapse'
            },'-',{
                id:'remove',
                handler:removeNode,
                cls:'remove',
                text: 'löschen/delete'
        }]
    });
	function prepareMenu(node, e){
        node.select();
        Menu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
        Menu.showAt(e.getXY());
    }
	function collapseAll(){
        Menu.hide();
        setTimeout(function(){
            Rroot.eachChild(function(n){
               n.collapse(false, false);
            });
        }, 10);
    }
    function expandAll(){
        Menu.hide();
        setTimeout(function(){
            Rroot.eachChild(function(n){
               n.expand(false, false);
            });
        }, 10);
    }
	function removeNode(){
        var n = sm.getSelectedNode();
        if(n && n.attributes.allowDelete){
            myTree.getSelectionModel().selectPrevious();
            n.parentNode.removeChild(n);
        }
    }
});

Den fertigen Tree könnt ihr euch hier anschauen.