chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.fx.DragListGroup</title>
  <meta charset="utf-8">
  <script src="../base.js"></script>
  <script>
    goog.require('goog.dom');
    goog.require('goog.fx.DragListDirection');
    goog.require('goog.fx.DragListGroup');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <style>
    body {
      font-family: verdana, sans-serif;
    }

    .hr_clear {
      float: none;
      clear: both;
      height: 0px;
      padding: 10px 0px 0px 0px;
      border: 0px;
      margin: 0px;
      visibility: hidden;
    }

    .bug {
      color: red;
      font-style: italic;
    }

    .horiz1_class,
    .horiz3_class,
    .horiz5_class {
      padding: 8px 12px;
      /* box_height + 2 * (padding + border + margin) =
         50 + 2 * (5 + 2 + 4) = 72px */
      height: 72px;
      border: 2px solid #000000;
    }
    .horiz1_class { float: left; }
    .horiz3_class { float: left; }
    .horiz5_class { float: left; }

    .horiz1_class div { float: left; }
    .horiz3_class div { float: right; }
    .horiz5_class div { float: left; }

    .horiz5_class {
      width: 288px;
      height: 216px;
    }

    .vert_table td {
      vertical-align: top;
      padding: 0px 20px;
    }

    .vert1_class,
    .vert2_class {
      padding: 12px 8px;
      /* box_width + 2 * (padding + border + margin) =
         50 + 2 * (5 + 2 + 2) = 68px */
      width: 68px;
      border: 2px solid #000000;
    }

    div.red_box,
    div.yellow_box,
    div.blue_box,
    div.purple_box {
      width: 50px;
      height: 50px;
      padding: 5px;
      margin: 4px 2px;
      font-family: verdana, sans-serif;
      font-size: 36px;
      font-weight: bold;
      text-align: center;
    }
    div.red_box {
      border: 2px solid #CC0000;
      color: #CC0000;
    }
    div.yellow_box {
      border: 2px solid #CCCC00;
      color: #CCCC00;
    }
    div.blue_box {
      border: 2px solid #0000CC;
      color: #0000CC;
    }
    div.purple_box {
      border: 2px solid #993399;
      color: #993399;
    }

    #test {
      background-color: #CCFFCC;
      width: 100px;
      height: 100px;
      padding: 13px;
      border: 11px solid #339933;
      margin: 15px;
    }

    /* The following styles are used in the JS. */

    .cursor_pointer {
      cursor: pointer;
    }

    .cursor_move {
      cursor: move;
      -moz-user-select: none;
    }

    .opacity_40 {
      opacity: 0.4;
      -moz-opacity: 0.4;
      filter: alpha(opacity=40);
    }

    .drag_hover_class {
      border-color: #009900;
      background-color: #CCFFCC;
    }
  </style>
</head>
<body>

  <h1>goog.fx.DragListGroup</h1>
  <h2>You can drag any squares into any of the first 4 lists.</h2>
  <hr class="hr_clear">

  <h4>Horizontal list 1 (grows right):</h4>
  <div id="horiz1_div" class="horiz1_class">
    <div class="red_box">1</div>
    <div class="red_box">2</div>
    <div class="red_box">3</div>
    <div class="red_box">4</div>
  </div>
  <hr class="hr_clear">

  <table class="vert_table">
  <tr>

  <td>
  <h4>Vertical list 1:</h4>
  <div id="vert1_div" class="vert1_class">
    <div class="blue_box">1</div>
    <div class="blue_box">2</div>
    <div class="blue_box">3</div>
    <div class="blue_box">4</div>
  </div>
  </td>

  <td>
  <h4>Vertical list 2 (style changes on drag hover):</h4>
  <div id="vert2_div" class="vert2_class">
    <div class="purple_box">1</div>
    <div class="purple_box">2</div>
    <div class="purple_box">3</div>
    <div class="purple_box">4</div>
  </div>
  </td>

  </tr>
  </table>
  <hr class="hr_clear">
  <h4>Horizontal list 3 (grows left):</h4>
  <p class="bug">Bug: drop position is off by one.</p>
  <div id="horiz3_div" class="horiz3_class">
    <div class="yellow_box">1</div>
    <div class="yellow_box">2</div>
    <div class="yellow_box">3</div>
    <div class="yellow_box">4</div>
  </div>
  <hr class="hr_clear">

  <h4>Horizontal list 5 (grows right, has multiple rows, hysteresis is enabled):</h4>
  <p class="bug">Bug: can't drop into the last row.</p>
  <div id="horiz5_div" class="horiz5_class">
    <div class="blue_box">11</div>
    <div class="blue_box">22</div>
    <div class="blue_box">33</div>
    <div class="blue_box">44</div>
    <div class="blue_box">55</div>
    <div class="blue_box">66</div>
    <div class="blue_box">77</div>
    <div class="blue_box">88</div>
    <div class="blue_box">99</div>
  </div>
  <hr class="hr_clear">

  <h4>The items in this list can be moved around with shift-dragging:</h4>
  <div id="horiz6_div" class="horiz1_class">
    <div class="red_box">1</div>
    <div class="red_box">2</div>
    <div class="red_box">3</div>
    <div class="red_box">4</div>
  </div>
  <hr class="hr_clear">

  <h4>The items have different width:</h4>
  <p class="bug">
    Bug: the drop positions are off.
    For example try moving box 1 a bit to the left.
  </p>
  <div id="horiz7_div" class="horiz1_class">
    <div class="red_box" style="width: 200px">1</div>
    <div class="red_box">2</div>
    <div class="red_box" style="width: 200px">3</div>
    <div class="red_box">4</div>
  </div>
  <hr class="hr_clear">
  <script>

  var dlg = new goog.fx.DragListGroup();
  dlg.setDragItemHoverClass('cursor_move');
  dlg.setDraggerElClass('cursor_move opacity_40');

  dlg.addDragList(goog.dom.getElement('horiz1_div'),
      goog.fx.DragListDirection.RIGHT);
  dlg.addDragList(goog.dom.getElement('horiz3_div'),
      goog.fx.DragListDirection.LEFT);
  dlg.addDragList(goog.dom.getElement('vert1_div'),
      goog.fx.DragListDirection.DOWN);
  dlg.addDragList(goog.dom.getElement('vert2_div'),
      goog.fx.DragListDirection.DOWN, true, 'drag_hover_class');

  dlg.init();

  var dlg2 = new goog.fx.DragListGroup();
  dlg2.setDragItemHoverClass('cursor_move');
  dlg2.setDraggerElClass('cursor_move opacity_40');
  dlg2.setCurrDragItemClass('opacity_40');
  dlg2.setIsCurrDragItemAlwaysDisplayed();
  dlg2.addDragList(goog.dom.getElement('horiz5_div'),
      goog.fx.DragListDirection.RIGHT_2D);
  dlg2.setHysteresis(5);
  dlg2.init();

  var dlg3 = new goog.fx.DragListGroup();
  dlg3.setDragItemHoverClass('cursor_move');
  dlg3.setDraggerElClass('cursor_move opacity_40');
  dlg3.addDragList(goog.dom.getElement('horiz6_div'),
      goog.fx.DragListDirection.RIGHT);
  goog.events.listen(dlg3, goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
      function(e) {
        if (!e.event.shiftKey) {
          e.preventDefault();
        }
      });
  dlg3.init();

  var dlg4 = new goog.fx.DragListGroup();
  dlg4.setDragItemHoverClass('cursor_move');
  dlg4.setDraggerElClass('cursor_move opacity_40');
  dlg4.setIsCurrDragItemAlwaysDisplayed();
  dlg4.addDragList(goog.dom.getElement('horiz7_div'),
      goog.fx.DragListDirection.RIGHT);
  dlg4.init();
  </script>
</body>
</html>