Fancytree Drag and Drop

Fancy tree drag'n'drop example.

Make sure that `children` field of model is dereferenced, see Maslosoft.Koe.TreeItem in dev/src/Model.coffee

When using multi-line binding definition the data property must be quited with '

There are two rendering related options used:

• nodeIcon - To use custom icon, with also custom styling possible (and recommended). This allows responsive icon/title size.
• nodeFolder - Same as `nodeIcon` but for nodes containing childs.
• nodeRenderer - Custom node renderer. This renderer gets param as actual ko model, not fancytree node. So many possibilies are open here. See dev/src/TitleRenderer.coffee for example

Also responsive font size is used. Document font size: Increase / Decrease / Reset

Relevant code used in examples:

<div class="fancy-tree"
	data-bind="fancytree: {­
		'data': binder.model.Tree,
		nodeIcon: 'images/pdf.png', 
		folderIcon: 'images/zip.png', 
		nodeRenderer: Maslosoft.BinderDev.TitleRenderer, 
		on:{­
			'dblclick':binder.log, 
			'drop': Maslosoft.BinderDev.FancyTreeDropHandler
		­}, 
		dnd: true, 
		autoExpand: true
	­}">
</div>
<script>
	window.onload = (function () {­
		// Create tree structure
		var data = {­
			_class: 'Maslosoft.Koe.TreeItem',
			title: "Some container",
			children: [
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Zero",
					description: "This can be also rendered via custom renderer"
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "One",
					description: "Another one with description",
					children: [
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Two",
							description: "Hover for node tooltip - also added by node renderer"
						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Three",
							children: [
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "Three-Two"
								­},
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "Three-Three"
								­}
							]

						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Four"
						­}
					]
				­}
			]
		­};
		binder.model.Tree = new Maslosoft.Koe.TreeItem(data);
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));

		// Helper code
		binder.log = function () {­
			// Do not bind directly to `on` or will fail with `Illegal Invocation`
			console.log(arguments);
		­}
	­});
</script>