jstree
拖动
$(function(){
$.tree.drag_start=function(){
$("#log").append("<br/>Dragstart");
};
$.tree.drag=function(){
$("#log").append(".");
};
$.tree.drag_end=function(){
$("#log").append("Dragend<br/>");
};
$("#demo_1").tree({
rules:{
//IhavenotdefinedanyofthesesodisablingthecheckswillsaveCPUcycles
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));
}
}
});
});
<!DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jsTree»Demos</title>
<scripttype="text/javascript"src="../lib/jquery.js"></script>
<scripttype="text/javascript"src="../lib/jquery.cookie.js"></script>
<scripttype="text/javascript"src="../lib/jquery.hotkeys.js"></script>
<scripttype="text/javascript"src="../lib/jquery.metadata.js"></script>
<scripttype="text/javascript"src="../lib/sarissa.js"></script>
<scripttype="text/javascript"src="../jquery.tree.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.checkbox.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.contextmenu.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.cookie.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.hotkeys.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.metadata.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.themeroller.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.xml_flat.js"></script>
<scripttype="text/javascript"src="../plugins/jquery.tree.xml_nested.js"></script>
<linktype="text/css"rel="stylesheet"href="syntax/shCore.css"/>
<linktype="text/css"rel="stylesheet"href="syntax/shThemeDefault.css"/>
<styletype="text/css">
html,body{margin:0;padding:0;}
body,td,th,pre,code,select,option,input,textarea{font-family:"TrebuchetMS",Sans-serif;font-size:10pt;}
#container{width:800px;margin:10pxauto;overflow:hidden;}
.demo{height:200px;width:300px;float:left;margin:0;border:1pxsolidgray;font-family:Verdana;font-size:10px;background:white;}
.code{width:490px;float:right;margin:0010px0;border:1pxsolidgray;}
pre{display:block;}
.syntaxhighlighter{margin:0000!important;padding:0!important;}
</style>
<scripttype="text/javascript"src="syntax/shCore.js"></script>
<scripttype="text/javascript"src="syntax/shBrushJScript.js"></script>
<scripttype="text/javascript"src="syntax/shBrushXml.js"></script>
<scripttype="text/javascript">
SyntaxHighlighter.config.clipboardSwf='syntax/clipboard.swf';
$(function(){
varh=0;
$("#container.source").each(function(){
varcode=$(this).html().replace(/</g,'<').replace(/>/g,'>');
vardiv=$('<divclass="code"><preclass="brush:'+($(this).is("script")?'js':'xml')+';">'+code+'</pre></div>');
$(this).after(div);
});
SyntaxHighlighter.all();
});
</script>
</head>
<body>
<divid="container">
<h1class="title">Movingnodesdemo</h1>
<p>Asyoumayhavenoticed,youcandragnodesaround.Youcaninfluencetheabilitytodropanodesomewhereusingthe<ahref="../documentation.html#type.max_children">typemax_childrensetting</a>,<ahref="../documentation.html#type.max_depth">typemax_depthsetting</a>and<ahref="../documentation.html#type.valid_children">typevalid_childrensetting</a>.Ifyouwanttodisabledragginganodetypeusethe<ahref="../documentation.html#type.draggable">typedraggablesetting</a>(youcaneventuseitonthedefaultnodetype).Whenmovingthe<ahref="../documentation.html#callback.beforemove">beforemove</a>,<ahref="../documentation.html#callback.onmove">onmove</a>,<ahref="../documentation.html#callback.oncopy">oncopy</a>,<ahref="../documentation.html#callback.check_move">check_move</a>and<ahref="../documentation.html#callback.ondrop">ondrop</a>callbacksaretriggered.Alsoifyouassignedafunctiontothemtheglobal<ahref="../documentation.html#tree.drag_start">tree.drag_start</a>,<ahref="../documentation.html#tree.drag">tree.drag</a>,<ahref="../documentation.html#tree.drag_end">tree.drag_end</a>arefired.Ondropisonlyfiredwhendroppingforeignitemsonthetree-formoreonthat-checkthe<ahref="../documentation.html#tree.drop_mode">tree.drop_mode</a>function.</p>
<p>Ifyouwanttocopywhendraggingwithoutholdingcontrolordisablecopying-readaboutthe<ahref="../documentation.html#rules.drag_copy">drag_copy</a>setting.</p>
<p>Fordraggingitemsfromonetreetoanother-checkthe<ahref="../documentation.html#rules.multitree">multitree</a>setting.</p>
<p>Tomovenodesprogramaticallyusethe<ahref="../documentation.html#copy">copy</a>,<ahref="../documentation.html#cut">cut</a>&<ahref="../documentation.html#paste">paste</a>functions.</p>
<scripttype="text/javascript"class="source">
$(function(){
$.tree.drag_start=function(){
$("#log").append("<br/>Dragstart");
};
$.tree.drag=function(){
$("#log").append(".");
};
$.tree.drag_end=function(){
$("#log").append("Dragend<br/>");
};
$("#demo_1").tree({
rules:{
//IhavenotdefinedanyofthesesodisablingthecheckswillsaveCPUcycles
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>
<divclass="demo"id="demo_1">
<ul>
<liid="phtml_1"class="open"><ahref="#"><ins> </ins>Rootnode1</a>
<ul>
<liid="phtml_2"><ahref="#"><ins> </ins>Childnode1</a></li>
<liid="phtml_3"><ahref="#"><ins> </ins>Childnode2</a></li>
<liid="phtml_4"><ahref="#"><ins> </ins>Someotherchildnodewithlongertext</a></li>
</ul>
</li>
<liid="phtml_5"><ahref="#"><ins> </ins>Rootnode2</a></li>
</ul>
</div>
<pclass="source"style="margin-top:10px;">
<inputtype="button"onclick='$.tree.focused().cut();'value="Cut"/>
<inputtype="button"onclick='$.tree.focused().copy();'value="Copy"/>
<inputtype="button"onclick='$.tree.focused().paste();'value="Paste"/>
</p>
<divstyle="clear:both;min-height:300px;"id="log">Log:<br/></div>
</div></body></html>