| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <!DOCTYPE html>
- <html><head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
- <title>Fancytree - Example: Drag'n'drop</title>
- <!--
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js" type="text/javascript"></script>
- <script src="http://codeorigin.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
- <script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
- -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>
- <link href="../../node_modules/jquery.fancytree/dist/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css" class="skinswitcher">
- <!--
- <script src="jquery.fancytree.js" type="text/javascript"></script>
- <script src="jquery.fancytree.dnd.js" type="text/javascript"></script>
- -->
- <script src="../../node_modules/jquery.fancytree/dist/jquery.fancytree.js" type="text/javascript"></script>
- <script src="../../node_modules/jquery.fancytree/dist/modules/jquery.fancytree.dnd.js" type="text/javascript"></script>
- <!-- Start_Exclude: This block is not part of the sample code -->
- <link href="sample.css" rel="stylesheet" type="text/css">
- <script src="sample.js" type="text/javascript"></script>
- <!-- End_Exclude -->
- <style type="text/css">
- #draggableSample, #droppableSample {
- height:100px;
- padding:0.5em;
- width:150px;
- border:1px solid #AAAAAA;
- }
- #draggableSample {
- background-color: silver;
- color:#222222;
- }
- #droppableSample {
- background-color: maroon;
- color: white;
- }
- #droppableSample.drophover {
- border: 1px solid green;
- }
- </style>
- <!-- Add code to initialize the tree when the document is loaded: -->
- <script type="text/javascript">
- $(function(){
- // Attach the fancytree widget to an existing <div id="tree"> element
- // and pass the tree options as an argument to the fancytree() function:
- $("#tree").fancytree({
- extensions: ["dnd"],
- source: [
- {"title": "simple node (no explicit id, so a default key is generated)" },
- {"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
- {"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
- {"key": "4", "title": "node 4" },
- {"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
- {"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
- {"key": "10", "title": "Folder 1", "folder": true, "children": [
- {"key": "10_1", "title": "Sub-item 1.1", "children": [
- {"key": "10_1_1", "title": "Sub-item 1.1.1"},
- {"key": "10_1_2", "title": "Sub-item 1.1.2"}
- ]},
- {"key": "10_2", "title": "Sub-item 1.2", "children": [
- {"key": "10_2_1", "title": "Sub-item 1.2.1"},
- {"key": "10_2_2", "title": "Sub-item 1.2.2"}
- ]}
- ]},
- {"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
- {"key": "20_1", "title": "Sub-item 2.1", "children": [
- {"key": "20_1_1", "title": "Sub-item 2.1.1"},
- {"key": "20_1_2", "title": "Sub-item 2.1.2"}
- ]},
- {"key": "20_2", "title": "Sub-item 2.2", "children": [
- {"key": "20_2_1", "title": "Sub-item 2.2.1"},
- {"key": "20_2_2", "title": "Sub-item 2.2.2"}
- ]}
- ]},
- {"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
- {"key": "31", "title": "Lazy folder 2", "folder": true, "lazy": true },
- {"key": "32", "title": "Lazy folder 3", "folder": true, "lazy": true }
- ]
- ,
- dnd: {
- preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
- preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
- autoExpandMS: 400,
- onDragStart: function(node) {
- /** This function MUST be defined to enable dragging for the tree.
- * Return false to cancel dragging of node.
- */
- return true;
- },
- onDragEnter: function(node, sourceNode) {
- /** sourceNode may be null for non-fancytree droppables.
- * Return false to disallow dropping on node. In this case
- * onDragOver and onDragLeave are not called.
- * Return 'over', 'before, or 'after' to force a hitMode.
- * Return ['before', 'after'] to restrict available hitModes.
- * Any other return value will calc the hitMode from the cursor position.
- */
- // Prevent dropping a parent below another parent (only sort
- // nodes under the same parent)
- /* if(node.parent !== sourceNode.parent){
- return false;
- }
- // Don't allow dropping *over* a node (would create a child)
- return ["before", "after"];
- */
- return true;
- },
- onDrop: function(node, sourceNode, hitMode, ui, draggable) {
- /** This function MUST be defined to enable dropping of items on
- * the tree.
- */
- sourceNode.moveTo(node, hitMode);
- }
- },
- activate: function(e, data) {
- // alert("activate " + data.node);
- }
- });
- });
- </script>
- </head>
- <body class="example">
- <h1>Example: 'dnd' extension</h1>
- <div class="description">
- This sample shows drag'n'drop support.
- </div>
- <div>
- <label for="skinswitcher">Skin:</label> <select id="skinswitcher"><option value="xp">XP</option><option value="vista">Vista (classic Dynatree)</option><option value="win7">Win7</option><option value="win8">Win8</option><option value="lion">Lion</option></select>
- </div>
- <!-- Add a <table> element where the tree should appear: -->
- <div id="tree">
- <ul class="ui-fancytree fancytree-container" tabindex="0"><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">simple node (no explicit id, so a default key is generated)</span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title" title="Look, a tool tip!">item1 with key and tooltip</span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title"><span>item2 with <b>html</b> inside a span tag</span></span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">node 4</span></span></li><li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">using href</span></span></li><li class=""><span class="fancytree-node my-extra-class fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">node with some extra classes (will be added to the generated markup)</span></span></li><li class=""><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-exp-c fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Folder 1</span></span></li><li class=""><span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-exp-e fancytree-ico-e"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Simple node with active children (expand)</span></span><ul><li class=""><span class="fancytree-node fancytree-has-children fancytree-exp-c fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Sub-item 2.1</span></span></li><li class="fancytree-lastsib"><span class="fancytree-node fancytree-has-children fancytree-lastsib fancytree-exp-cl fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Sub-item 2.2</span></span></li></ul></li><li class=""><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-lazy fancytree-exp-cd fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Lazy folder</span></span></li><li class=""><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-lazy fancytree-exp-cd fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Lazy folder 2</span></span></li><li class="fancytree-lastsib"><span class="fancytree-node fancytree-folder fancytree-has-children fancytree-lastsib fancytree-lazy fancytree-exp-cdl fancytree-ico-cf"><span class="fancytree-expander"></span><span class="fancytree-icon"></span><span class="fancytree-title">Lazy folder 3</span></span></li></ul></div>
- <!-- Start_Exclude: This block is not part of the sample code -->
- <hr>
- <p class="sample-links no_code">
- <a class="hideInsideFS" href="https://github.com/mar10/fancytree" style="display: none;">jquery.fancytree.js project home</a>
- <a class="hideOutsideFS" href="#">Link to this page</a>
- <a class="hideInsideFS" href="index.html" style="display: none;">Example Browser</a>
- <a href="#" id="codeExample">View source code</a>
- </p><p class="version-info">Fancytree 2.0.0-1, jQuery UI 1.10.4, jQuery 1.11.1</p>
- <pre id="sourceCode" class="prettyprint" style="display:none"></pre>
- <!-- End_Exclude -->
- </body></html>
|
