docs/guides/drag_and_drop/step1.html

   1 <html>
   2 <head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4     <title>ExtJS.com Drag and Drop with DOM Elements: Step 1</title>
   5 <link rel="stylesheet" type="text/css" href="/ext3/resources/css/ext-all.css" />
   6 <script type="text/javascript" src="/ext3/adapter/ext/ext-base.js"></script>
   7 <script type="text/javascript" src="/ext3/ext-all-debug.js"></script>
   8 <!--<script type="text/javascript" src="dnd.js"></script>-->
   9
  10 <style type="text/css">
  11     body  {
  12         padding: 10px;
  13     }
  14
  15     .availableLot {
  16         width:                 105px;
  17         border:                1px solid #999999;
  18         padding:               10px;
  19         height:                290px;
  20         -moz-border-radius:    17px;
  21         -webkit-border-radius: 17px;
  22
  23     }
  24
  25
  26     .rented, .repair {
  27         width: 195px;
  28     }
  29
  30     .availableLot div {
  31         -moz-border-radius:    5px;
  32         -webkit-border-radius: 5px;
  33         width:                 85px;
  34         border:                1px solid #666666;
  35         padding:               3px;
  36         background-color:      #FFFFFF;
  37         margin:                5px;
  38         cursor:                move;
  39         text-align:            center;
  40     }
  41
  42     #cars div, #trucks div {
  43         margin: 5px;
  44         width:  85px;
  45     }
  46
  47     #repair div, #rented div {
  48         float:  left;
  49         margin: 2px;
  50         /*padding:           3px;*/
  51
  52     }
  53
  54     .imgThumb {
  55         height:  57px;
  56         width:   77px;
  57         border: 1px solid #777777;
  58     }
  59
  60
  61     .dropOK {
  62         background-color: #99ff99 !important;
  63     }
  64
  65     .dropNotOK {
  66         border: 1px solid #FF0000 !important;
  67     }
  68 </style>
  69
  70     <!--[if IE]>
  71
  72 <style type="text/css">
  73     body  {
  74         padding: 10px;
  75     }
  76
  77     .availableLot {
  78         width:            120px;
  79         border:           1px solid #999999;
  80         padding:          10px;
  81         height:           320px;
  82     }
  83
  84
  85     .rented, .repair {
  86         width:            210px;
  87     }
  88
  89     .availableLot div {
  90         width:             85px;
  91         border:            1px solid #666666;
  92         padding:           3px;
  93         background-color:  #FFFFFF;
  94         margin:            5px;
  95         cursor:            move;
  96         text-align:        center;
  97     }
  98
  99     #cars div, #trucks div {
 100         margin: 5px;
 101         width:  85px;
 102     }
 103
 104     #repair div, #rented div {
 105         float:  left;
 106         margin: 2px;
 107     }
 108
 109     .imgThumb {
 110         height:  57px;
 111         width:   77px;
 112         border:  1px solid #777777;
 113     }
 114
 115
 116     .dropOK {
 117         background-color: #99ff99 !important;
 118     }
 119
 120     .dropNotOK {
 121         border: 1px solid #FF0000 !important;
 122     }
 123 </style>
 124 <![endif]-->
 125 </head>
 126 <body>
 127 <table class="x-unselectable">
 128     <tr>
 129         <td>
 130             <table>
 131                 <tr>
 132                     <td align='center'>
 133                         Available Cars
 134                     </td>
 135                 <td align='center'>
 136                     Available Trucks
 137                 </td>
 138                 </tr>
 139
 140
 141                <tr>
 142                     <td>
 143                         <div id="cars" class="availableLot">
 144                             <div><img src="img/camaro.jpg" class="imgThumb" qtip="Camaro"/></div>
 145                             <div><img src="img/miata.jpg" class="imgThumb" qtip="Miata"/></div>
 146                             <div><img src="img/mustang.jpg" class="imgThumb" qtip="Mustang"/></div>
 147                             <div><img src="img/corvette.jpg" class="imgThumb" qtip="Corvette"/></div>
 148                         </div>
 149                     </td>
 150
 151                      <td>
 152                          <div id="trucks" class="availableLot trucksLot">
 153                              <div><img src="img/f150.jpg" class="imgThumb"  qtip="F150"/></div>
 154                              <div><img src="img/tahoe.jpg" class="imgThumb" qtip="Tahoe"/></div>
 155                              <div><img src="img/tacoma.jpg" class="imgThumb" qtip="Tacoma"/></div>
 156                              <div><img src="img/s10.jpg" class="imgThumb" qtip="S10"/></div>
 157                          </div>
 158                      </td>
 159                  </tr>
 160
 161             </table>
 162         </td>
 163         <td align='center' style="width: 200px;">
 164             <table>
 165                 <tr>
 166                     <td align='center' style="width: 200px;">
 167                        Vehicles Rented
 168                     </td>
 169                     <td align='center' style="width: 200px;">
 170                         Vehicles In Repair
 171                     </td>
 172                 </tr>
 173                 <tr  style="">
 174                     <td style="">
 175                         <div id="rented" class="availableLot rented"></div>
 176                     </td>
 177                      <td>
 178                          <div id="repair" class="availableLot repair"></div>
 179                      </td>
 180                  </tr>
 181
 182             </table>
 183         </td>
 184     </tr>
 185     </table>
 186 <script type="text/javascript">
 187
 188 Ext.onReady(function() {
 189     Ext.QuickTips.init();
 190
 191     var overrides = {};
 192
 193     // Configure the cars to be draggable
 194     var carElements = Ext.get('cars').select('div');
 195     Ext.each(carElements.elements, function(el) {
 196         var dd = new Ext.dd.DD(el, 'carsDDGroup', {
 197             isTarget  : false
 198         });
 199         Ext.apply(dd, overrides);
 200     });
 201
 202     var truckElements = Ext.get('trucks').select('div');
 203     Ext.each(truckElements.elements, function(el) {
 204         var dd = new Ext.dd.DD(el, 'trucksDDGroup', {
 205             isTarget  : false
 206         });
 207         Ext.apply(dd, overrides);
 208     });
 209
 210 });
 211
 212 </script>
 213 </body>
 214 </html>
 215