Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

Fancytree Drag and Drop Between Trees

Fancy tree drag and drop between two trees example.

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

This is currently broken

Drag only list

  • {{title}}

Drag only

Drop target and DND tree

Relevant code used in examples:

<div class="row">
	<div class="col-sm-4">
		<h4>Drag only list</h4>
		<ul  data-bind="foreach: {­data: binder.model.list.children­}">
			<li data-bind="draggable: {­data: $data, options: {­connectToFancytree: true­}­}">{­title­}­}</li>
		</ul>
	</div>
	<div class="col-sm-4">
		<h4>Drag only</h4>
		<div data-bind="fancytree: {­data: binder.model.Tree, drag: true, autoExpand: true, options: binder.model.options­}">
		</div>
	</div>
	<div class="col-sm-4">
		<h4>Drop target and DND tree</h4>
		<div data-bind="fancytree: {­data: binder.model.Tree2, dnd: true, autoExpand: true, options: binder.model.options­}">
		</div>
	</div>
</div>
<script>
	window.onload = (function () {­
		var listData = {­
			children: [
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Affenpinscher",
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Afghan Shepherd"
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Aidi",
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Airedale Terrier"
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Akbash"
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Akita Inu"
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Afghan Hound"

				­}
			]
		­}
		binder.model.list = new Maslosoft.Koe.TreeItem(listData);
		var data = {­
			_class: 'Maslosoft.Koe.TreeItem',
			title: "Dogs",
			children: [
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Affenpinscher",
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Afghan Hound",
					children: [
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Afghan Shepherd"
						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Aidi",
							children: [
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "Airedale Terrier"
								­},
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "Akbash"
								­}
							]

						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Akita Inu"
						­}
					]
				­}
			]
		­};
		binder.model.Tree = new Maslosoft.Koe.TreeItem(data);
		data2 = {­
			_class: 'Maslosoft.Koe.TreeItem',
			title: "Cats",
			children: [
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Abyssinian",
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "Aegean"
				­},
				{­
					_class: 'Maslosoft.Koe.TreeItem',
					title: "American Curl",
					children: [
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "American Bobtail",
							children: [
								{­
									_class: 'Maslosoft.Koe.TreeItem',
									title: "American Shorthair"
								­}
							]

						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "American Wirehair"
						­},
						{­
							_class: 'Maslosoft.Koe.TreeItem',
							title: "Arabian Mau"
						­}
					]
				­}
			]
		­};
		binder.model.Tree2 = new Maslosoft.Koe.TreeItem(data2);
		binder.model.options = {­
			dnd:{­
				draggable: {­
					scroll: false
				­}
			­}
		­};
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>