| Server IP : 162.214.74.102 / Your IP : 216.73.216.139 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/team/assets/js/aci-tree/ |
Upload File : |
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="index, follow">
<title>aciTree drag & drop outside tree demo - A treeview control with jQuery</title>
<meta name="description" content="A demo to show you how aciTree can be used with aciSortable, check the plugin page to see all the functions exposed by the API">
<meta name="keywords" content="aciTree, treeview, control, tree view, javascript, jQuery">
<link rel="stylesheet" type="text/css" href="css/aciTree.css" media="all">
<link rel="stylesheet" type="text/css" href="css/demo.css" media="all">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.aciPlugin.min.js"></script>
<script type="text/javascript" src="js/jquery.aciSortable.min.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.dom.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.core.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.utils.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.selectable.js"></script>
<script type="text/javascript" src="js/jquery.aciTree.sortable.js"></script>
</head>
<body>
<div>
<p>Note that this demo is using aciSortable to process the drag & drop (see the aciSortable docs to understand how to use it).</p>
<p>For ordering tree items in a drag & drop style - check <a href="aciTree-drag-drop.html" target="_blank" title="Sorting tree items">this</a> demo.</p>
<div id="tree1" class="aciTree"><div>
<a style="font-size:10px" href="/source/php/niceJson.php?file=source/aciTree/json/checkbox.json" title="See the JSON data" target="_blank">see the JSON behind this tree</a>
<br>The easy way to find a car that's right for you</div></div>
<div class="log">Tree Log... <a class="clear_log" style="font-size:10px" href="#" title="Clear the LOG" target="_blank">clear log</a>
<div></div></div>
<div style="clear:both"></div>
<div class="drop brand"><p>Brand (drag a brand from the above tree)</p>
<ul></ul>
</div>
<div class="drop body"><p>Body (drag a body type from the above tree)</p>
<ul></ul>
</div>
<div class="drop any"><p>Drag one brand or body type here</p>
<ul></ul>
</div>
<script class="code" type="text/javascript">
$(function() {
// listen for the events
$('#tree1').on('acitree', function(event, api, item, eventName, options) {
switch (eventName) {
case 'beforedrag':
if (!api.isLeaf(item)) {
// only drag leaf items
return false;
}
var parent = api.parent(item);
if ((api.getLabel(parent) != 'Brand') && (api.getLabel(parent) != 'Body Type & Size')) {
// only drag from brand & body type
return false;
}
break;
case 'checkdrop':
// cancel tree item sorting
return false;
}
});
// init the tree
$('#tree1').aciTree({
ajax: {
url: 'json/checkbox-radio-button.json'
},
sortable: true
});
// connect with the drop targets
$('#tree1').aciSortable('option', 'connectDrop', '.drop');
// init the drop targets
$('.drop').aciSortable({
dropPosition: 1,
valid: function(item, hover, before, isContainer, placeholder, helper) {
var tree = $('#tree1').aciTree('api');
if (tree.isItem(item)) {
var parent = tree.parent(item);
if (!this._instance.jQuery.hasClass('any')) {
// test for a valid destination
if (((tree.getLabel(parent) == 'Brand') && !this._instance.jQuery.hasClass('brand')) ||
((tree.getLabel(parent) == 'Body Type & Size') && !this._instance.jQuery.hasClass('body'))) {
return false;
}
}
var id = tree.getId(item);
// test if the item was dragged already
if (this._instance.jQuery.find('#item-' + id).length) {
return false;
}
return true;
}
return false;
},
end: function(item, hover, placeholder, helper) {
if (placeholder.parent().length) {
var tree = $('#tree1').aciTree('api');
if (tree.isItem(item)) {
var id = tree.getId(item);
var label = tree.getLabel(item);
if (this._instance.jQuery.hasClass('any')) {
// keep only one item
this._instance.jQuery.find('li:not(.aciSortablePlaceholder)').remove();
}
var item = $('<li id="item-' + id + '">' + label + '</li>');
placeholder.after(item).detach();
} else {
placeholder.detach();
}
}
helper.detach();
}
});
// connect together so we can drag the item around
$('.brand').aciSortable('option', 'connectDrop', '.body,.any');
$('.body').aciSortable('option', 'connectDrop', '.brand,.any');
$('.any').aciSortable('option', 'connectDrop', '.body,.brand');
});
</script>
<script type="text/javascript">
$(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('<p>' + eventName + ' [' + api.getId(item) + ']</p>');
} else {
log.prepend('<p>' + eventName + ' [tree]</p>');
}
});
$('.clear_log').click(function() {
$(this).closest('.log').find('div').html('');
return false;
});
});
</script>
</div>
<script type="text/javascript">
$(function() {
$('script.code').each(function() {
$(this).before('<div style="clear:both;margin:10px 0 10px 0"><pre style="padding:20px;border:1px dashed #000;background:#f6f6f6;display:inline-block;"></pre></div>');
$(this).prev('div').find('pre').text($(this).html());
});
});
</script>
</body>
</html>