library/js/jquery.treeview-1.4.1/demo/sortable.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4
   5         <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
   6         <title>jQuery treeview</title>
   7
   8         <link rel="stylesheet" href="../jquery.treeview.css" />
   9         <link rel="stylesheet" href="screen.css" />
  10
  11
  12         <script src="../../../jquery/src/core.js" type="text/javascript" charset="utf-8"></script>
  13         <script src="../../../jquery/src/selector.js" type="text/javascript" charset="utf-8"></script>
  14         <script src="../../../jquery/src/event.js" type="text/javascript" charset="utf-8"></script>
  15         <script src="../../../jquery/src/ajax.js" type="text/javascript" charset="utf-8"></script>
  16         <script src="../../../jquery/src/fx.js" type="text/javascript" charset="utf-8"></script>
  17         <script src="../../../jquery/src/offset.js" type="text/javascript" charset="utf-8"></script>
  18         <script src="../../../jquery/src/dimensions.js" type="text/javascript" charset="utf-8"></script>
  19
  20
  21         <script src="../lib/jquery.cookie.js" type="text/javascript"></script>
  22         <script src="../jquery.treeview.js" type="text/javascript"></script>
  23         <script src="../jquery.treeview.edit.js" type="text/javascript"></script>
  24
  25         <script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
  26         <script src="../../../ui/ui.droppable.js" type="text/javascript" charset="utf-8"></script>
  27         <script src="../jquery.treeview.sortable.js" type="text/javascript"></script>
  28
  29         <style type="text/css" media="screen">
  30                 .drop {
  31                         background-color: #eee !important;
  32                         border: 1px dotted #333;
  33                 }
  34                 .bar {
  35                         border-bottom: 1px dotted blue;
  36                 }
  37
  38                 .float {
  39                         float: left;
  40                         border: 1px solid #aaa;
  41                         margin: 10px;
  42                         padding: 10px;
  43                 }
  44
  45                 div.treeview-helper {
  46                         border: 1px solid #aaa;
  47                         background: #fff;
  48                         padding: 5px;
  49                         padding-left: 25px;
  50                 }
  51
  52         </style>
  53
  54         <script type="text/javascript">
  55                 (function($) {
  56                         var CLASSES = $.treeview.classes;
  57                         var proxied = $.fn.treeview;
  58                         $.fn.treeview = function(settings) {
  59                                 settings = $.extend({}, settings);
  60                                 if (settings.update) {
  61                                         return this.trigger("update", [settings.update]);
  62                                 }
  63                                 return proxied.apply(this, arguments).bind("update", function(event, branches) {
  64                                         if (branches.hasClass(CLASSES.last) || branches.hasClass(CLASSES.lastExpandable) || branches.hasClass(CLASSES.lastCollapsable)) {
  65                                                 branches.prev().addClass(CLASSES.last)
  66                                                 .filter("." + CLASSES.expandable).replaceClass(CLASSES.last, CLASSES.lastExpandable).end()
  67                                                 .find(">.hitarea").replaceClass(CLASSES.expandableHitarea, CLASSES.lastExpandableHitarea).end()
  68                                                 .filter("." + CLASSES.collapsable).replaceClass(CLASSES.last, CLASSES.lastCollapsable).end()
  69                                                 .find(">.hitarea").replaceClass(CLASSES.collapsableHitarea, CLASSES.lastCollapsableHitarea);
  70                                         }
  71                                 });
  72                         };
  73
  74                 })(jQuery);
  75
  76
  77
  78
  79         $.fn.sortableTreeview = function(o) {
  80                 this.each(function() {
  81
  82                         $(this).treeview().sortableTree({
  83                                 connectWith: o.connectWith,
  84                                 items: 'li',
  85                                 helper: function(e,item) {
  86                                         return $("<div class='treeview-helper'>"+item.find("span").html()+"</div>");
  87                                 },
  88                                 //revert: true,
  89                                 sortIndication: {
  90                                         down: function(item) {
  91                                                 item.css("border-top", "1px dotted black");
  92                                         },
  93                                         up: function(item) {
  94                                                 item.css("border-bottom", "1px dotted black");
  95                                         },
  96                                         remove: function(item) {
  97                                                 item.css("border-bottom", "0px").css("border-top", "0px");
  98                                         }
  99                                 },
 100                                 start: function(event, ui) {
 101                                         ui.instance.element.treeview({update: ui.item});
 102
 103                                 },
 104                                 update: function(event, ui) {
 105                                         ui.item.removeClass();
 106                                         ui.instance.element.treeview({add: ui.item});
 107                                 }
 108                         });
 109
 110                         $(".folder", this).droppable({
 111                                 accept: "li",
 112                                 hoverClass: "drop",
 113                                 tolerance: "pointer",
 114                                 drop: function(e,ui) {
 115                                         $("> ul", this.parentNode).append(ui.draggable);
 116                                 },
 117                                 over: function(e,ui) {
 118                                         ui.helper.css("outline", "2px solid green");
 119                                 },
 120                                 out: function(e,ui) {
 121                                         ui.helper.css("outline", "2px solid red");
 122                                 }
 123                         });
 124
 125                 });
 126         };
 127
 128
 129                 $(function() {
 130
 131
 132                         $("#browser, #browser2").sortableTreeview({ connectWith: ["#browser", "#browser2"] });
 133
 134                 })
 135
 136         </script>
 137
 138         </head>
 139         <body>
 140
 141         <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin</a> Demo</h1>
 142         <div id="main">
 143
 144         <a href=".">Main Demo</a>
 145
 146         <h4>Sample 1 - default, right-click to remove items</h4>
 147
 148 <div class="float">
 149         <ul id="browser" class="filetree">
 150                 <li><span class="folder">Folder 1</span>
 151                         <ul>
 152                                 <li><span class="file">Item 1.1</span></li>
 153                         </ul>
 154                 </li>
 155                 <li><span class="folder">Folder 2</span>
 156                         <ul>
 157                                 <li><span class="folder">Subfolder 2.1</span>
 158                                         <ul id="folder21">
 159                                                 <li><span class="file">File 2.1.1</span></li>
 160                                                 <li><span class="file">File 2.1.2</span></li>
 161                                                 <li><span class="file">File 2.1.3</span></li>
 162                                                 <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
 163                                                         <ul>
 164                                                                 <li><span class="file">File 3.1</span></li>
 165                                                         </ul>
 166                                                 </li>
 167                                                 <li><span class="file">File 2.1.4</span></li>
 168                                                 <li><span class="file">File 2.1.5</span></li>
 169                                                 <li><span class="file">File 2.1.6</span></li>
 170                                         </ul>
 171                                 </li>
 172                                 <li><span class="file">File 2.2</span></li>
 173                         </ul>
 174                 </li>
 175                 <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
 176                         <ul>
 177                                 <li><span class="file">File 3.1</span></li>
 178                         </ul>
 179                 </li>
 180                 <li><span class="file">File 4</span></li>
 181         </ul>
 182 </div>
 183
 184 <div class="float">
 185         <ul id="browser2" class="filetree">
 186                 <li><span class="folder">Folder 1</span>
 187                         <ul>
 188                                 <li><span class="file">Item 1.1</span></li>
 189                         </ul>
 190                 </li>
 191                 <li><span class="folder">Folder 2</span>
 192                         <ul>
 193                                 <li><span class="folder">Subfolder 2.1</span>
 194                                         <ul id="folder21">
 195                                                 <li><span class="file">File 2.1.1</span></li>
 196                                                 <li><span class="file">File 2.1.2</span></li>
 197                                                 <li><span class="file">File 2.1.3</span></li>
 198                                                 <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
 199                                                         <ul>
 200                                                                 <li><span class="file">File 3.1</span></li>
 201                                                         </ul>
 202                                                 </li>
 203                                                 <li><span class="file">File 2.1.4</span></li>
 204                                                 <li><span class="file">File 2.1.5</span></li>
 205                                                 <li><span class="file">File 2.1.6</span></li>
 206                                         </ul>
 207                                 </li>
 208                                 <li><span class="file">File 2.2</span></li>
 209                         </ul>
 210                 </li>
 211                 <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
 212                         <ul>
 213                                 <li><span class="file">File 3.1</span></li>
 214                         </ul>
 215                 </li>
 216                 <li><span class="file">File 4</span></li>
 217         </ul>
 218 </div>
 219
 220         </div>
 221
 222 </body></html>