Ajax Tree with Drag and Drop

[lee-daMember]

Hi,

I combined these two features to enable item sorting in a fairly large tree.

My problem now is that Drag and Drop only works for the first level (initially loaded items). All dynamically loaded items are indeed draggable – but not dropable.

Do you have a solution for this?

Thanks.

$(document).ready(function () {
	var tree = $('#tree');
	$.getJSON('data.php?load=tree', function(data){
		tree.jqxTree({ 
			source: data, 
			width:'400px', 
			height:'600px', 
			animationShowDuration: 0, 
			allowDrag: true, 
			allowDrop: true, 
			theme: 'classic'
		});
		tree.bind('expand', function(event) {
			var $element = $(event.args.element);
			var loader = false;
			var loaderItem = null;
			var children = $element.find('li');
			$.each(children, function() {
				var item = tree.jqxTree('getItem', this);
				if (item.label == 'Loading...') {
					loaderItem = item;
					loader = true;
					return false
				};
			});
			if (loader) {
				$.getJSON('data.php?load=leaf&id='+loaderItem.value, function(data){
					tree.jqxTree('addTo', data, $element[0]);
					tree.jqxTree('removeItem', loaderItem.element);
				});
			}
		});		   
	});
});

Update:

Further testing shows that dropping child items works once in a while. But I can’t figure out what conditions are met in this case.

Tested Browsers:
– Firefox
– Chrome

Update 2:

It seems that only dropPosition “before” and “after” are affected. Dropping inside another item works.

[DimitarParticipant]

Hello lee-da,

Thank you for your feedback. We confirm the reported issue and have created a work item on the matter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts