remix_example/dd-reorder_clean.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4     <meta http-equiv="content-type" content="text/html; charset=utf-8">
   5 <title>Reordering a List</title>
   6
   7 <style type="text/css">
   8 /*margin and padding on body element
   9   can introduce errors in determining
  10   element position and are not recommended;
  11   we turn them off as a foundation for YUI
  12   CSS treatments. */
  13 body {
  14         margin:0;
  15         padding:0;
  16 }
  17 </style>
  18
  19 <link rel="stylesheet" type="text/css" href="js/fonts-min.css" />
  20 <script type="text/javascript" src="js/yahoo-dom-event.js"></script>
  21 <script type="text/javascript" src="js/animation-min.js"></script>
  22 <script type="text/javascript" src="js/dragdrop-min.js"></script>
  23
  24
  25 <!--begin custom header content for this example-->
  26
  27 <style type="text/css">
  28
  29 div.workarea { padding:10px; float:left }
  30
  31 ul.draglist {
  32     position: relative;
  33     width: 200px;
  34     height:240px;
  35     background: #f7f7f7;
  36     border: 1px solid gray;
  37     list-style: none;
  38     margin:0;
  39     padding:0;
  40 }
  41
  42 ul.draglist li {
  43     margin: 1px;
  44     cursor: move;
  45     zoom: 1;
  46 }
  47
  48 ul.draglist_alt {
  49     position: relative;
  50     width: 200px;
  51     list-style: none;
  52     margin:0;
  53     padding:0;
  54     /*
  55        The bottom padding provides the cushion that makes the empty
  56        list targetable.  Alternatively, we could leave the padding
  57        off by default, adding it when we detect that the list is empty.
  58     */
  59     padding-bottom:20px;
  60 }
  61
  62 ul.draglist_alt li {
  63     margin: 1px;
  64     cursor: move;
  65 }
  66
  67
  68 li.list1 {
  69     background-color: #D1E6EC;
  70     border:1px solid #7EA6B2;
  71 }
  72
  73 li.list2 {
  74     background-color: #D8D4E2;
  75     border:1px solid #6B4C86;
  76 }
  77
  78 #user_actions { float: right; }
  79
  80 </style>
  81
  82
  83 <!--end custom header content for this example-->
  84
  85 </head>
  86
  87 <body class=" yui-skin-sam">
  88
  89
  90 <h1>Reordering a List</h1>
  91
  92 <div class="exampleIntro">
  93         <p>This example demonstrates how to create a list that can have the order changed with the <a href="http://developer.yahoo.com/yui/dragdrop/">Drag &amp; Drop Utility</a>.</p>
  94
  95 </div>
  96
  97 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
  98
  99
 100 <div class="workarea">
 101   <h3>List 1</h3>
 102   <ul id="ul1" class="draglist">
 103     <li class="list1" id="li1_1">list 1, item 1</li>
 104     <li class="list1" id="li1_2">list 1, item 2</li>
 105     <li class="list1" id="li1_3">list 1, item 3</li>
 106   </ul>
 107 </div>
 108
 109 <div class="workarea">
 110   <h3>List 2</h3>
 111   <ul id="ul2" class="draglist">
 112     <li class="list2" id="li2_1">list 2, item 1</li>
 113     <li class="list2" id="li2_2">list 2, item 2</li>
 114     <li class="list2" id="li2_3">list 2, item 3</li>
 115   </ul>
 116 </div>
 117
 118 <div id="user_actions">
 119   <input type="button" id="showButton" value="Show Current Order" />
 120   <input type="button" id="switchButton" value="Remove List Background" />
 121 </div>
 122
 123 <script type="text/javascript">
 124
 125 (function() {
 126
 127 var Dom = YAHOO.util.Dom;
 128 var Event = YAHOO.util.Event;
 129 var DDM = YAHOO.util.DragDropMgr;
 130
 131 //////////////////////////////////////////////////////////////////////////////
 132 // example app
 133 //////////////////////////////////////////////////////////////////////////////
 134 YAHOO.example.DDApp = {
 135     init: function() {
 136
 137         var rows=3,cols=2,i,j;
 138         for (i=1;i<cols+1;i=i+1) {
 139             new YAHOO.util.DDTarget("ul"+i);
 140         }
 141
 142         for (i=1;i<cols+1;i=i+1) {
 143             for (j=1;j<rows+1;j=j+1) {
 144                 new YAHOO.example.DDList("li" + i + "_" + j);
 145             }
 146         }
 147
 148         Event.on("showButton", "click", this.showOrder);
 149         Event.on("switchButton", "click", this.switchStyles);
 150     },
 151
 152     showOrder: function() {
 153         var parseList = function(ul, title) {
 154             var items = ul.getElementsByTagName("li");
 155             var out = title + ": ";
 156             for (i=0;i<items.length;i=i+1) {
 157                 out += items[i].id + " ";
 158             }
 159             return out;
 160         };
 161
 162         var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
 163         alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
 164
 165     },
 166
 167     switchStyles: function() {
 168         Dom.get("ul1").className = "draglist_alt";
 169         Dom.get("ul2").className = "draglist_alt";
 170     }
 171 };
 172
 173 //////////////////////////////////////////////////////////////////////////////
 174 // custom drag and drop implementation
 175 //////////////////////////////////////////////////////////////////////////////
 176
 177 YAHOO.example.DDList = function(id, sGroup, config) {
 178
 179     YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
 180
 181     this.logger = this.logger || YAHOO;
 182     var el = this.getDragEl();
 183     Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
 184
 185     this.goingUp = false;
 186     this.lastY = 0;
 187 };
 188
 189 YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
 190
 191     startDrag: function(x, y) {
 192         this.logger.log(this.id + " startDrag");
 193
 194         // make the proxy look like the source element
 195         var dragEl = this.getDragEl();
 196         var clickEl = this.getEl();
 197         Dom.setStyle(clickEl, "visibility", "hidden");
 198
 199         dragEl.innerHTML = clickEl.innerHTML;
 200
 201         Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
 202         Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
 203         Dom.setStyle(dragEl, "border", "2px solid gray");
 204     },
 205
 206     endDrag: function(e) {
 207
 208         var srcEl = this.getEl();
 209         var proxy = this.getDragEl();
 210
 211         // Show the proxy element and animate it to the src element's location
 212         Dom.setStyle(proxy, "visibility", "");
 213         var a = new YAHOO.util.Motion(
 214             proxy, {
 215                 points: {
 216                     to: Dom.getXY(srcEl)
 217                 }
 218             },
 219             0.2,
 220             YAHOO.util.Easing.easeOut
 221         )
 222         var proxyid = proxy.id;
 223         var thisid = this.id;
 224
 225         // Hide the proxy and show the source element when finished with the animation
 226         a.onComplete.subscribe(function() {
 227                 Dom.setStyle(proxyid, "visibility", "hidden");
 228                 Dom.setStyle(thisid, "visibility", "");
 229             });
 230         a.animate();
 231     },
 232
 233     onDragDrop: function(e, id) {
 234
 235         // If there is one drop interaction, the li was dropped either on the list,
 236         // or it was dropped on the current location of the source element.
 237         if (DDM.interactionInfo.drop.length === 1) {
 238
 239             // The position of the cursor at the time of the drop (YAHOO.util.Point)
 240             var pt = DDM.interactionInfo.point;
 241
 242             // The region occupied by the source element at the time of the drop
 243             var region = DDM.interactionInfo.sourceRegion;
 244
 245             // Check to see if we are over the source element's location.  We will
 246             // append to the bottom of the list once we are sure it was a drop in
 247             // the negative space (the area of the list without any list items)
 248             if (!region.intersect(pt)) {
 249                 var destEl = Dom.get(id);
 250                 var destDD = DDM.getDDById(id);
 251                 destEl.appendChild(this.getEl());
 252                 destDD.isEmpty = false;
 253                 DDM.refreshCache();
 254             }
 255
 256         }
 257     },
 258
 259     onDrag: function(e) {
 260
 261         // Keep track of the direction of the drag for use during onDragOver
 262         var y = Event.getPageY(e);
 263
 264         if (y < this.lastY) {
 265             this.goingUp = true;
 266         } else if (y > this.lastY) {
 267             this.goingUp = false;
 268         }
 269
 270         this.lastY = y;
 271     },
 272
 273     onDragOver: function(e, id) {
 274
 275         var srcEl = this.getEl();
 276         var destEl = Dom.get(id);
 277
 278         // We are only concerned with list items, we ignore the dragover
 279         // notifications for the list.
 280         if (destEl.nodeName.toLowerCase() == "li") {
 281             var orig_p = srcEl.parentNode;
 282             var p = destEl.parentNode;
 283
 284             if (this.goingUp) {
 285                 p.insertBefore(srcEl, destEl); // insert above
 286             } else {
 287                 p.insertBefore(srcEl, destEl.nextSibling); // insert below
 288             }
 289
 290             DDM.refreshCache();
 291         }
 292     }
 293 });
 294
 295 Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
 296
 297 })();
 298
 299
 300 </script>
 301
 302 <!--END SOURCE CODE FOR EXAMPLE =============================== -->
 303
 304 </body>
 305 </html>