jstree
拖动
$(function () {
$.tree.drag_start = function () {
$("#log").append("<br />Drag start ");
};
$.tree.drag = function () {
$("#log").append(" .");
};
$.tree.drag_end = function () {
$("#log").append(" Drag end<br />");
};
$("#demo_1").tree({
rules : {
// I have not defined any of these so disabling the checks will save CPU cycles
use_max_children : false,
use_max_depth : false
},
callback : {
onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
}
}
});
});
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree » Demos</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../lib/jquery.metadata.js"></script>
<script type="text/javascript" src="../lib/sarissa.js"></script>
<script type="text/javascript" src="../jquery.tree.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.checkbox.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.contextmenu.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.cookie.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.hotkeys.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.metadata.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.themeroller.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.xml_flat.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.xml_nested.js"></script>
<link type="text/css" rel="stylesheet" href="syntax/shCore.css"/>
<link type="text/css" rel="stylesheet" href="syntax/shThemeDefault.css"/>
<style type="text/css">
html, body { margin:0; padding:0; }
body, td, th, pre, code, select, option, input, textarea { font-family:"Trebuchet MS", Sans-serif; font-size:10pt; }
#container { width:800px; margin:10px auto; overflow:hidden; }
.demo { height:200px; width:300px; float:left; margin:0; border:1px solid gray; font-family:Verdana; font-size:10px; background:white; }
.code { width:490px; float:right; margin:0 0 10px 0; border:1px solid gray; }
pre { display:block; }
.syntaxhighlighter { margin:0 0 0 0 !important; padding:0 !important; }
</style>
<script type="text/javascript" src="syntax/shCore.js"></script>
<script type="text/javascript" src="syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="syntax/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'syntax/clipboard.swf';
$(function () {
var h = 0;
$("#container .source").each(function () {
var code = $(this).html().replace(/</g,'<').replace(/>/g,'>');
var div = $('<div class="code"><pre class="brush:' + ( $(this).is("script") ? 'js' : 'xml' ) + ';">' + code + '</pre></div>');
$(this).after(div);
});
SyntaxHighlighter.all();
});
</script>
</head>
<body>
<div id="container">
<h1 class="title">Moving nodes demo</h1>
<p>As you may have noticed, you can drag nodes around. You can influence the ability to drop a node somewhere using the <a href="../documentation.html#type.max_children">type max_children setting</a>, <a href="../documentation.html#type.max_depth">type max_depth setting</a> and <a href="../documentation.html#type.valid_children">type valid_children setting</a>. If you want to disable dragging a node type use the <a href="../documentation.html#type.draggable">type draggable setting</a> (you can event use it on the default node type). When moving the <a href="../documentation.html#callback.beforemove">beforemove</a>, <a href="../documentation.html#callback.onmove">onmove</a>, <a href="../documentation.html#callback.oncopy">oncopy</a>, <a href="../documentation.html#callback.check_move">check_move</a> and <a href="../documentation.html#callback.ondrop">ondrop</a> callbacks are triggered. Also if you assigned a function to them the global <a href="../documentation.html#tree.drag_start">tree.drag_start</a>, <a href="../documentation.html#tree.drag">tree.drag</a>, <a href="../documentation.html#tree.drag_end">tree.drag_end</a> are fired. Ondrop is only fired when dropping foreign items on the tree - for more on that - check the <a href="../documentation.html#tree.drop_mode">tree.drop_mode</a> function.</p>
<p>If you want to copy when dragging without holding control or disable copying - read about the <a href="../documentation.html#rules.drag_copy">drag_copy</a> setting.</p>
<p>For dragging items from one tree to another - check the <a href="../documentation.html#rules.multitree">multitree</a> setting.</p>
<p>To move nodes programatically use the <a href="../documentation.html#copy">copy</a>, <a href="../documentation.html#cut">cut</a> & <a href="../documentation.html#paste">paste</a> functions.</p>
<script type="text/javascript" class="source">
$(function () {
$.tree.drag_start = function () {
$("#log").append("<br />Drag start ");
};
$.tree.drag = function () {
$("#log").append(" .");
};
$.tree.drag_end = function () {
$("#log").append(" Drag end<br />");
};
$("#demo_1").tree({
rules : {
// I have not defined any of these so disabling the checks will save CPU cycles
use_max_children : false,
use_max_depth : false
},
callback : {
onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
}
}
});
});
</script>
<div class="demo" id="demo_1">
<ul>
<li id="phtml_1" class="open"><a href="#"><ins> </ins>Root node 1</a>
<ul>
<li id="phtml_2"><a href="#"><ins> </ins>Child node 1</a></li>
<li id="phtml_3"><a href="#"><ins> </ins>Child node 2</a></li>
<li id="phtml_4"><a href="#"><ins> </ins>Some other child node with longer text</a></li>
</ul>
</li>
<li id="phtml_5"><a href="#"><ins> </ins>Root node 2</a></li>
</ul>
</div>
<p class="source" style="margin-top:10px;">
<input type="button" onclick='$.tree.focused().cut();' value="Cut" />
<input type="button" onclick='$.tree.focused().copy();' value="Copy" />
<input type="button" onclick='$.tree.focused().paste();' value="Paste" />
</p>
<div style="clear:both; min-height:300px;" id="log">Log:<br /></div>
</div></body></html>
$(function () {
$.tree.drag_start = function () {
$("#log").append("<br />Drag start ");
};
$.tree.drag = function () {
$("#log").append(" .");
};
$.tree.drag_end = function () {
$("#log").append(" Drag end<br />");
};
$("#demo_1").tree({
rules : {
// I have not defined any of these so disabling the checks will save CPU cycles
use_max_children : false,
use_max_depth : false
},
callback : {
onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
}
}
});
});
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree » Demos</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../lib/jquery.metadata.js"></script>
<script type="text/javascript" src="../lib/sarissa.js"></script>
<script type="text/javascript" src="../jquery.tree.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.checkbox.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.contextmenu.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.cookie.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.hotkeys.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.metadata.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.themeroller.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.xml_flat.js"></script>
<script type="text/javascript" src="../plugins/jquery.tree.xml_nested.js"></script>
<link type="text/css" rel="stylesheet" href="syntax/shCore.css"/>
<link type="text/css" rel="stylesheet" href="syntax/shThemeDefault.css"/>
<style type="text/css">
html, body { margin:0; padding:0; }
body, td, th, pre, code, select, option, input, textarea { font-family:"Trebuchet MS", Sans-serif; font-size:10pt; }
#container { width:800px; margin:10px auto; overflow:hidden; }
.demo { height:200px; width:300px; float:left; margin:0; border:1px solid gray; font-family:Verdana; font-size:10px; background:white; }
.code { width:490px; float:right; margin:0 0 10px 0; border:1px solid gray; }
pre { display:block; }
.syntaxhighlighter { margin:0 0 0 0 !important; padding:0 !important; }
</style>
<script type="text/javascript" src="syntax/shCore.js"></script>
<script type="text/javascript" src="syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="syntax/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'syntax/clipboard.swf';
$(function () {
var h = 0;
$("#container .source").each(function () {
var code = $(this).html().replace(/</g,'<').replace(/>/g,'>');
var div = $('<div class="code"><pre class="brush:' + ( $(this).is("script") ? 'js' : 'xml' ) + ';">' + code + '</pre></div>');
$(this).after(div);
});
SyntaxHighlighter.all();
});
</script>
</head>
<body>
<div id="container">
<h1 class="title">Moving nodes demo</h1>
<p>As you may have noticed, you can drag nodes around. You can influence the ability to drop a node somewhere using the <a href="../documentation.html#type.max_children">type max_children setting</a>, <a href="../documentation.html#type.max_depth">type max_depth setting</a> and <a href="../documentation.html#type.valid_children">type valid_children setting</a>. If you want to disable dragging a node type use the <a href="../documentation.html#type.draggable">type draggable setting</a> (you can event use it on the default node type). When moving the <a href="../documentation.html#callback.beforemove">beforemove</a>, <a href="../documentation.html#callback.onmove">onmove</a>, <a href="../documentation.html#callback.oncopy">oncopy</a>, <a href="../documentation.html#callback.check_move">check_move</a> and <a href="../documentation.html#callback.ondrop">ondrop</a> callbacks are triggered. Also if you assigned a function to them the global <a href="../documentation.html#tree.drag_start">tree.drag_start</a>, <a href="../documentation.html#tree.drag">tree.drag</a>, <a href="../documentation.html#tree.drag_end">tree.drag_end</a> are fired. Ondrop is only fired when dropping foreign items on the tree - for more on that - check the <a href="../documentation.html#tree.drop_mode">tree.drop_mode</a> function.</p>
<p>If you want to copy when dragging without holding control or disable copying - read about the <a href="../documentation.html#rules.drag_copy">drag_copy</a> setting.</p>
<p>For dragging items from one tree to another - check the <a href="../documentation.html#rules.multitree">multitree</a> setting.</p>
<p>To move nodes programatically use the <a href="../documentation.html#copy">copy</a>, <a href="../documentation.html#cut">cut</a> & <a href="../documentation.html#paste">paste</a> functions.</p>
<script type="text/javascript" class="source">
$(function () {
$.tree.drag_start = function () {
$("#log").append("<br />Drag start ");
};
$.tree.drag = function () {
$("#log").append(" .");
};
$.tree.drag_end = function () {
$("#log").append(" Drag end<br />");
};
$("#demo_1").tree({
rules : {
// I have not defined any of these so disabling the checks will save CPU cycles
use_max_children : false,
use_max_depth : false
},
callback : {
onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
}
}
});
});
</script>
<div class="demo" id="demo_1">
<ul>
<li id="phtml_1" class="open"><a href="#"><ins> </ins>Root node 1</a>
<ul>
<li id="phtml_2"><a href="#"><ins> </ins>Child node 1</a></li>
<li id="phtml_3"><a href="#"><ins> </ins>Child node 2</a></li>
<li id="phtml_4"><a href="#"><ins> </ins>Some other child node with longer text</a></li>
</ul>
</li>
<li id="phtml_5"><a href="#"><ins> </ins>Root node 2</a></li>
</ul>
</div>
<p class="source" style="margin-top:10px;">
<input type="button" onclick='$.tree.focused().cut();' value="Cut" />
<input type="button" onclick='$.tree.focused().copy();' value="Copy" />
<input type="button" onclick='$.tree.focused().paste();' value="Paste" />
</p>
<div style="clear:both; min-height:300px;" id="log">Log:<br /></div>
</div></body></html>