The sortable extension is using the aciSortable plugin, the available callback init options and the options parameter of the event handler
receives the properties as defined by aciSortable (see the docs). aciTree adds a few extra events on top of aciSortable so we can handle
with ease the drag start and check for a valid drop target. In this way we can limit what items can be dragged and where they can be dropped.
For dragging tree items out of the tree – check this demo.
See the examples below for what can be done by responding to only two events: beforedrag and checkdrop.
Note: you can also implement your own options.sortDrag and options.sortValid
callbacks to set the helper (the element that follows the mouse pointer when in drag) the way you want.
For the default implementation – check the source code of the sortable extension.
The default implementation (options.sortable needs to be active), you can drag & drop items anywhere, before or after another one,
set as a child of a leaf node (it will be transformed in a inode by default), the parent can be changed:
Limit the number of newly created tree levels to only #3 (we wont be able to add more than #3 levels deep but still be able to sort
existing items in more than #3 levels deep):
= 2) {
// mark the drop target as invalid
return false;
}
} else {
if (options.before === null) {
// container creation is disabled for levels >= #3
var target = api.itemFrom(options.hover);
if (api.level(target) >= 2) {
// mark the drop target as invalid
return false;
}
}
}
break;
}
});
// init the tree
$(‘#tree2’).aciTree({
ajax: {
url: ‘json/checkbox-radio-button.json’
},
sortable: true
});
});
]]>
Limit the items that can be dragged around to just leaf items:
Items can be dragged around only inside the same parent (items can’t change parent):
<![CDATA[
$(function() {
// write to log
$('[id^=tree]').on('acitree', function(event, api, item, eventName, options) {
var log = $(this).next('.log').find('div');
if (api.isItem(item)) {
log.prepend('
‘ + eventName + ‘ [‘ + api.getId(item) + ‘]’);
} else {
log.prepend(‘
‘ + eventName + ‘ [tree]’);
}
});
$(‘.clear_log’).click(function() {
$(this).closest(‘.log’).find(‘div’).html(”);
return false;
});
});
]]>
<![CDATA[
$(function() {
$('script.code').each(function() {
$(this).before('
');
$(this).prev('div').find('pre').text($(this).html());
});});
]]>