ref: master
plugins/display_content/public/javascripts/jstree-v.pre1.0/_docs/dnd.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
<!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 v.1.0 - dnd documentation</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="../jquery.jstree.js"></script> <link type="text/css" rel="stylesheet" href="syntax/!style.css"/> <link type="text/css" rel="stylesheet" href="!style.css"/> <script type="text/javascript" src="syntax/!script.js"></script> </head> <body> <div id="container"> <h1 id="dhead">jsTree v.1.0</h1> <h1>dnd plugin</h1> <h2>Description</h2> <div id="description"> <p>The <code>dnd</code> plugin enables drag'n'drop support for jstree, also using foreign nodes and drop targets.</p> <p class="note">All foreign node options and callback functions in the config (drop_target, drop_check, drop_finish, drag_target, drag_check, drag_finish) are to be used ONLY when nodes that are not part of any tree are involved.<br />If moving nodes from one tree instance to another - just listen for the "move_node.jstree" event on the receiving tree.<br /><span style="color:red">DO NOT SET drag_target AND drop_target to match tree nodes!</span></p> </div> <h2 id="configuration">Configuration</h2> <div class="panel configuration"> <h3>copy_modifier</h3> <p class="meta">A string. Default is <code>"ctrl"</code>.</p> <p>The special key used to make a drag copy instead of move (<code>"ctrl"</code>, <code>"shift"</code>, <code>"alt"</code>, <code>"meta"</code>).</p> <h3>check_timeout</h3> <p class="meta">A number. Default is <code>200</code>.</p> <p>The number of milliseconds to wait before checking if a move is valid upon hovering a node (while dragging). <code>200</code> is a reasonable value - a higher number means better performance but slow feedback to the user, a lower number means lower performance (possibly) but the user will get feedback faster.</p> <h3>open_timeout</h3> <p class="meta">A number. Default is <code>500</code>.</p> <p>The number of milliseconds to wait before opening a hovered if it has children (while dragging). This means that the user has to stop over the node for half a second in order to trigger the open operation. Keep in mind that a low value in combination with async data could mean a lot of unneeded traffic, so <code>500</code> is quite reasonable.</p> <h3>drop_target</h3> <p class="meta">A string (jQuery selector) (or <code>false</code>). Default is <code>".jstree-drop"</code>.</p> <p>A jquery selector matching all drop targets (you can also use the comma <code>,</code> in the string to specify multiple valid targets). If set to <code>false</code> drop targets are disabled.</p> <h3>drop_check</h3> <p class="meta">A function. Default is <code>function (data) { return true; }</code>.</p> <p>Return <code>false</code> to mark the move as invalid, otherwise return <code>true</code>. The <code>data</code> parameter is as follows:</p> <p style="margin-left:2em;"><code>data.o</code> - the object being dragged</p> <p style="margin-left:2em;"><code>data.r</code> - the drop target</p> <h3>drop_finish</h3> <p class="meta">A function. Default is <code>$.noop</code>.</p> <p>Gets executed after a valid drop, you get one parameter, which is as follows:</p> <p style="margin-left:2em;"><code>data.o</code> - the object being dragged</p> <p style="margin-left:2em;"><code>data.r</code> - the drop target</p> <h3>drag_target</h3> <p class="meta">A string (jQuery selector) (or <code>false</code>). Default is <code>".jstree-draggable"</code>.</p> <p>A jquery selector matching all foreign nodes that can be dropped on the tree (you can also use the comma <code>,</code> in the string to specify multiple valid foreign nodes). If set to <code>false</code> dragging foreign nodes is disabled.</p> <h3>drag_check</h3> <p class="meta">A function. Default is <code>function (data) { return { after : false, before : false, inside : true }; }</code>.</p> <p>Return a boolean for each position. The <code>data</code> parameter is as follows:</p> <p style="margin-left:2em;"><code>data.o</code> - the foreign object being dragged</p> <p style="margin-left:2em;"><code>data.r</code> - the hovered node</p> <h3>drag_finish</h3> <p class="meta">A function. Default is <code>$.noop</code>.</p> <p>Gets executed after a dropping a foreign element on a tree item, you get one parameter, which is as follows:</p> <p style="margin-left:2em;"><code>data.o</code> - the foreign object being dragged</p> <p style="margin-left:2em;"><code>data.r</code> - the target node</p> </div> <h2 id="demos">Demos</h2> <div class="panel"> <h3>Using the dnd plugin</h3> <p>Drag stuff around!</p> <div class="jstree-drop" style="clear:both; border:5px solid green; background:lime; color:green; height:40px; line-height:40px; text-align:center; font-size:20px;">I have the jstree-drop class</div> <div class="jstree-draggable" style="margin:10px 0; clear:both; border:5px solid navy; background:aqua; color:navy; height:40px; line-height:40px; text-align:center; font-size:20px;">I have the jstree-draggable class</div> <div id="demo1" class="demo"> <ul> <li id="phtml_1"> <a href="#">Root node 1</a> <ul> <li id="phtml_2"> <a href="#">Child node 1</a> </li> <li id="phtml_3"> <a href="#">Child node 2</a> </li> </ul> </li> <li id="phtml_4"> <a href="#">Root node 2</a> </li> </ul> </div> <script type="text/javascript" class="source"> $(function () { $("#demo1").jstree({ "dnd" : { "drop_finish" : function () { alert("DROP"); }, "drag_check" : function (data) { if(data.r.attr("id") == "phtml_1") { return false; } return { after : false, before : false, inside : true }; }, "drag_finish" : function (data) { alert("DRAG OK"); } }, "plugins" : [ "themes", "html_data", "dnd" ] }); }); </script> <h3>Reorder only demo</h3> <div id="demo2" class="demo"> <ul> <li id="rhtml_1"> <a href="#">Root node 1</a> <ul> <li id="rhtml_2"> <a href="#">Child node 1</a> </li> <li id="rhtml_3"> <a href="#">Child node 2</a> </li> <li id="rhtml_4"> <a href="#">Child node 3</a> </li> <li id="rhtml_5"> <a href="#">Child node 4</a> </li> </ul> </li> <li id="rhtml_6"> <a href="#">Root node 2</a> </li> <li id="rhtml_7"> <a href="#">Root node 3</a> </li> </ul> </div> <script type="text/javascript" class="source"> $(function () { $("#demo2").jstree({ "crrm" : { "move" : { "check_move" : function (m) { var p = this._get_parent(m.o); if(!p) return false; p = p == -1 ? this.get_container() : p; if(p === m.np) return true; if(p[0] && m.np[0] && p[0] === m.np[0]) return true; return false; } } }, "dnd" : { "drop_target" : false, "drag_target" : false }, "plugins" : [ "themes", "html_data", "crrm", "dnd" ] }); }); </script> </div> <h2 id="api">API</h2> <div class="panel api"> <div style="height:1px; visibility:hidden;"> <span id="dnd_show"> </span> <span id="dnd_open"> </span> <span id="dnd_finish"> </span> <span id="dnd_enter"> </span> <span id="start_drag"> </span> </div> <h3 id="dnd_prepare">.dnd_prepare ( ), .dnd_show ( ), .dnd_open ( ), .dnd_finish ( ), .dnd_enter ( ), .dnd_leave ( ), .start_drag ( )</h3> <p>All those functions are used internally only. If you want more information - examine the source code.</p> </div> </div> </body> </html> |