[Summary view] [Print] [Text view]

   1  
   2  <ul class="UIAPIPlugin-toc">
   3  <li><a href="#overview">Overview</a></li>
   4  <li><a href="#options">Options</a></li>
   5  <li><a href="#events">Events</a></li>
   6  <li><a href="#methods">Methods</a></li>
   7  <li><a href="#theming">Theming</a></li>
   8  </ul>
   9  <div class="UIAPIPlugin">
  10    <h1>jQuery UI Droppable</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          <p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</p>
  15  <p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
  16  <ul>
  17   <li> <b>ui.draggable</b> - current draggable element, a jQuery object.</li>
  18   <li> <b>ui.helper</b> - current draggable helper, a jQuery object</li>
  19   <li> <b>ui.position</b> - current position of the draggable helper { top: , left: }</li>
  20   <li> <b>ui.offset</b> - current absolute position of the draggable helper { top: , left: }</li>
  21  </ul>
  22      </div>
  23      <div id="overview-dependencies">
  24          <h3>Dependencies</h3>
  25          <ul>
  26  <li>UI Core</li>
  27  <li><a href="http://docs.jquery.com/UI/Draggable" title="UI/Draggable">UI Draggable</a></li>
  28  </ul>
  29      </div>
  30      <div id="overview-example">
  31          <h3>Example</h3>
  32          <div id="overview-example" class="example">
  33  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  34  <p><div id="demo" class="tabs-container" rel="100">
  35  Makes the div droppable (a drop target for a draggable).<br />
  36  </p>
  37  <pre>$(&quot;#draggable&quot;).draggable();
  38      $(&quot;#droppable&quot;).droppable({
  39        drop: function() { alert('dropped'); }
  40      });
  41  </pre>
  42  <p></div><div id="source" class="tabs-container">
  43  </p>
  44  <pre>&lt;!DOCTYPE html&gt;
  45  &lt;html&gt;
  46  &lt;head&gt;
  47    &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  48    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
  49    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
  50    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.draggable.js&quot;&gt;&lt;/script&gt;
  51    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.droppable.js&quot;&gt;&lt;/script&gt;
  52    &lt;style type=&quot;text/css&quot;&gt;
  53      #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
  54      #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
  55    &lt;/style&gt;
  56    &lt;script type="text/javascript"&gt;
  57    $(document).ready(function(){
  58      $(&quot;#draggable&quot;).draggable();
  59      $(&quot;#droppable&quot;).droppable({
  60        drop: function() { alert('dropped'); }
  61      });
  62    });
  63    &lt;/script&gt;
  64  &lt;/head&gt;
  65  &lt;body style="font-size:62.5%;"&gt;
  66    
  67  &lt;div id=&quot;droppable&quot;&gt;Drop here&lt;/div&gt;
  68  &lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;
  69  
  70  &lt;/body&gt;
  71  &lt;/html&gt;
  72  </pre>
  73  <p></div>
  74  </p><p></div>
  75      </div>
  76    </div>
  77    <div id="options">
  78      <h2 class="top-header">Options</h2>
  79      <ul class="options-list">
  80        
  81  <li class="option" id="option-accept">
  82    <div class="option-header">
  83      <h3 class="option-name"><a href="#option-accept">accept</a></h3>
  84      <dl>
  85        <dt class="option-type-label">Type:</dt>
  86          <dd class="option-type">Selector, Function</dd>
  87        
  88        <dt class="option-default-label">Default:</dt>
  89          <dd class="option-default">'*'</dd>
  90        
  91      </dl>
  92    </div>
  93    <div class="option-description">
  94      <p>All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.</p>
  95    </div>
  96    <div class="option-examples">
  97      <h4>Code examples</h4>
  98      <dl class="option-examples-list">
  99      
 100  <dt>
 101    Initialize a droppable with the <code>accept</code> option specified.
 102  </dt>
 103  <dd>
 104  <pre><code>$('.selector').droppable({ accept: '.special' });</code></pre>
 105  </dd>
 106  
 107      
 108  <dt>
 109    Get or set the <code>accept</code> option, after init.
 110  </dt>
 111  <dd>
 112  <pre><code>//getter
 113  var accept = $('.selector').droppable('option', 'accept');
 114  //setter
 115  $('.selector').droppable('option', 'accept', '.special');</code></pre>
 116  </dd>
 117  
 118      </dl>
 119    </div>
 120  </li>
 121  
 122  
 123  <li class="option" id="option-activeClass">
 124    <div class="option-header">
 125      <h3 class="option-name"><a href="#option-activeClass">activeClass</a></h3>
 126      <dl>
 127        <dt class="option-type-label">Type:</dt>
 128          <dd class="option-type">String</dd>
 129        
 130        <dt class="option-default-label">Default:</dt>
 131          <dd class="option-default">false</dd>
 132        
 133      </dl>
 134    </div>
 135    <div class="option-description">
 136      <p>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</p>
 137    </div>
 138    <div class="option-examples">
 139      <h4>Code examples</h4>
 140      <dl class="option-examples-list">
 141      
 142  <dt>
 143    Initialize a droppable with the <code>activeClass</code> option specified.
 144  </dt>
 145  <dd>
 146  <pre><code>$('.selector').droppable({ activeClass: '.ui-state-highlight' });</code></pre>
 147  </dd>
 148  
 149      
 150  <dt>
 151    Get or set the <code>activeClass</code> option, after init.
 152  </dt>
 153  <dd>
 154  <pre><code>//getter
 155  var activeClass = $('.selector').droppable('option', 'activeClass');
 156  //setter
 157  $('.selector').droppable('option', 'activeClass', '.ui-state-highlight');</code></pre>
 158  </dd>
 159  
 160      </dl>
 161    </div>
 162  </li>
 163  
 164  
 165  <li class="option" id="option-addClasses">
 166    <div class="option-header">
 167      <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
 168      <dl>
 169        <dt class="option-type-label">Type:</dt>
 170          <dd class="option-type">Boolean</dd>
 171        
 172        <dt class="option-default-label">Default:</dt>
 173          <dd class="option-default">true</dd>
 174        
 175      </dl>
 176    </div>
 177    <div class="option-description">
 178      <p>If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.</p>
 179    </div>
 180    <div class="option-examples">
 181      <h4>Code examples</h4>
 182      <dl class="option-examples-list">
 183      
 184  <dt>
 185    Initialize a droppable with the <code>addClasses</code> option specified.
 186  </dt>
 187  <dd>
 188  <pre><code>$('.selector').droppable({ addClasses: false });</code></pre>
 189  </dd>
 190  
 191      
 192  <dt>
 193    Get or set the <code>addClasses</code> option, after init.
 194  </dt>
 195  <dd>
 196  <pre><code>//getter
 197  var addClasses = $('.selector').droppable('option', 'addClasses');
 198  //setter
 199  $('.selector').droppable('option', 'addClasses', false);</code></pre>
 200  </dd>
 201  
 202      </dl>
 203    </div>
 204  </li>
 205  
 206  
 207  <li class="option" id="option-greedy">
 208    <div class="option-header">
 209      <h3 class="option-name"><a href="#option-greedy">greedy</a></h3>
 210      <dl>
 211        <dt class="option-type-label">Type:</dt>
 212          <dd class="option-type">Boolean</dd>
 213        
 214        <dt class="option-default-label">Default:</dt>
 215          <dd class="option-default">false</dd>
 216        
 217      </dl>
 218    </div>
 219    <div class="option-description">
 220      <p>If true, will prevent event propagation on nested droppables.</p>
 221    </div>
 222    <div class="option-examples">
 223      <h4>Code examples</h4>
 224      <dl class="option-examples-list">
 225      
 226  <dt>
 227    Initialize a droppable with the <code>greedy</code> option specified.
 228  </dt>
 229  <dd>
 230  <pre><code>$('.selector').droppable({ greedy: true });</code></pre>
 231  </dd>
 232  
 233      
 234  <dt>
 235    Get or set the <code>greedy</code> option, after init.
 236  </dt>
 237  <dd>
 238  <pre><code>//getter
 239  var greedy = $('.selector').droppable('option', 'greedy');
 240  //setter
 241  $('.selector').droppable('option', 'greedy', true);</code></pre>
 242  </dd>
 243  
 244      </dl>
 245    </div>
 246  </li>
 247  
 248  
 249  <li class="option" id="option-hoverClass">
 250    <div class="option-header">
 251      <h3 class="option-name"><a href="#option-hoverClass">hoverClass</a></h3>
 252      <dl>
 253        <dt class="option-type-label">Type:</dt>
 254          <dd class="option-type">String</dd>
 255        
 256        <dt class="option-default-label">Default:</dt>
 257          <dd class="option-default">false</dd>
 258        
 259      </dl>
 260    </div>
 261    <div class="option-description">
 262      <p>If specified, the class will be added to the droppable while an acceptable draggable is being hovered.</p>
 263    </div>
 264    <div class="option-examples">
 265      <h4>Code examples</h4>
 266      <dl class="option-examples-list">
 267      
 268  <dt>
 269    Initialize a droppable with the <code>hoverClass</code> option specified.
 270  </dt>
 271  <dd>
 272  <pre><code>$('.selector').droppable({ hoverClass: 'drophover' });</code></pre>
 273  </dd>
 274  
 275      
 276  <dt>
 277    Get or set the <code>hoverClass</code> option, after init.
 278  </dt>
 279  <dd>
 280  <pre><code>//getter
 281  var hoverClass = $('.selector').droppable('option', 'hoverClass');
 282  //setter
 283  $('.selector').droppable('option', 'hoverClass', 'drophover');</code></pre>
 284  </dd>
 285  
 286      </dl>
 287    </div>
 288  </li>
 289  
 290  
 291  <li class="option" id="option-scope">
 292    <div class="option-header">
 293      <h3 class="option-name"><a href="#option-scope">scope</a></h3>
 294      <dl>
 295        <dt class="option-type-label">Type:</dt>
 296          <dd class="option-type">String</dd>
 297        
 298        <dt class="option-default-label">Default:</dt>
 299          <dd class="option-default">'default'</dd>
 300        
 301      </dl>
 302    </div>
 303    <div class="option-description">
 304      <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.</p>
 305    </div>
 306    <div class="option-examples">
 307      <h4>Code examples</h4>
 308      <dl class="option-examples-list">
 309      
 310  <dt>
 311    Initialize a droppable with the <code>scope</code> option specified.
 312  </dt>
 313  <dd>
 314  <pre><code>$('.selector').droppable({ scope: 'tasks' });</code></pre>
 315  </dd>
 316  
 317      
 318  <dt>
 319    Get or set the <code>scope</code> option, after init.
 320  </dt>
 321  <dd>
 322  <pre><code>//getter
 323  var scope = $('.selector').droppable('option', 'scope');
 324  //setter
 325  $('.selector').droppable('option', 'scope', 'tasks');</code></pre>
 326  </dd>
 327  
 328      </dl>
 329    </div>
 330  </li>
 331  
 332  
 333  <li class="option" id="option-tolerance">
 334    <div class="option-header">
 335      <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
 336      <dl>
 337        <dt class="option-type-label">Type:</dt>
 338          <dd class="option-type">String</dd>
 339        
 340        <dt class="option-default-label">Default:</dt>
 341          <dd class="option-default">'intersect'</dd>
 342        
 343      </dl>
 344    </div>
 345    <div class="option-description">
 346      <p>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.
 347  </p>
 348  <ul>
 349  <li><b>fit</b>: draggable overlaps the droppable entirely</li>
 350  <li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
 351  <li><b>pointer</b>: mouse pointer overlaps the droppable</li>
 352  <li><b>touch</b>: draggable overlaps the droppable any amount</li>
 353  </ul>
 354  <p></p>
 355    </div>
 356    <div class="option-examples">
 357      <h4>Code examples</h4>
 358      <dl class="option-examples-list">
 359      
 360  <dt>
 361    Initialize a droppable with the <code>tolerance</code> option specified.
 362  </dt>
 363  <dd>
 364  <pre><code>$('.selector').droppable({ tolerance: 'fit' });</code></pre>
 365  </dd>
 366  
 367      
 368  <dt>
 369    Get or set the <code>tolerance</code> option, after init.
 370  </dt>
 371  <dd>
 372  <pre><code>//getter
 373  var tolerance = $('.selector').droppable('option', 'tolerance');
 374  //setter
 375  $('.selector').droppable('option', 'tolerance', 'fit');</code></pre>
 376  </dd>
 377  
 378      </dl>
 379    </div>
 380  </li>
 381  
 382      </ul>
 383    </div>
 384    <div id="events">
 385      <h2 class="top-header">Events</h2>
 386      <ul class="events-list">
 387        
 388  <li class="event" id="event-activate">
 389    <div class="event-header">
 390      <h3 class="event-name"><a href="#event-activate">activate</a></h3>
 391      <dl>
 392        <dt class="event-type-label">Type:</dt>
 393          <dd class="event-type">dropactivate</dd>
 394      </dl>
 395    </div>
 396    <div class="event-description">
 397      <p>This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.</p>
 398    </div>
 399    <div class="event-examples">
 400      <h4>Code examples</h4>
 401      <dl class="event-examples-list">
 402      
 403  <dt>
 404    Supply a callback function to handle the <code>activate</code> event as an init option.
 405  </dt>
 406  <dd>
 407  <pre><code>$('.selector').droppable({
 408     activate: function(event, ui) { ... }
 409  });</code></pre>
 410  </dd>
 411  
 412      
 413  <dt>
 414    Bind to the <code>activate</code> event by type: <code>dropactivate</code>.
 415  </dt>
 416  <dd>
 417  <pre><code>$('.selector').bind('dropactivate', function(event, ui) {
 418    ...
 419  });</code></pre>
 420  </dd>
 421  
 422      </dl>
 423    </div>
 424  </li>
 425  
 426  
 427  <li class="event" id="event-deactivate">
 428    <div class="event-header">
 429      <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
 430      <dl>
 431        <dt class="event-type-label">Type:</dt>
 432          <dd class="event-type">dropdeactivate</dd>
 433      </dl>
 434    </div>
 435    <div class="event-description">
 436      <p>This event is triggered any time an accepted draggable stops dragging.</p>
 437    </div>
 438    <div class="event-examples">
 439      <h4>Code examples</h4>
 440      <dl class="event-examples-list">
 441      
 442  <dt>
 443    Supply a callback function to handle the <code>deactivate</code> event as an init option.
 444  </dt>
 445  <dd>
 446  <pre><code>$('.selector').droppable({
 447     deactivate: function(event, ui) { ... }
 448  });</code></pre>
 449  </dd>
 450  
 451      
 452  <dt>
 453    Bind to the <code>deactivate</code> event by type: <code>dropdeactivate</code>.
 454  </dt>
 455  <dd>
 456  <pre><code>$('.selector').bind('dropdeactivate', function(event, ui) {
 457    ...
 458  });</code></pre>
 459  </dd>
 460  
 461      </dl>
 462    </div>
 463  </li>
 464  
 465  
 466  <li class="event" id="event-over">
 467    <div class="event-header">
 468      <h3 class="event-name"><a href="#event-over">over</a></h3>
 469      <dl>
 470        <dt class="event-type-label">Type:</dt>
 471          <dd class="event-type">dropover</dd>
 472      </dl>
 473    </div>
 474    <div class="event-description">
 475      <p>This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</p>
 476    </div>
 477    <div class="event-examples">
 478      <h4>Code examples</h4>
 479      <dl class="event-examples-list">
 480      
 481  <dt>
 482    Supply a callback function to handle the <code>over</code> event as an init option.
 483  </dt>
 484  <dd>
 485  <pre><code>$('.selector').droppable({
 486     over: function(event, ui) { ... }
 487  });</code></pre>
 488  </dd>
 489  
 490      
 491  <dt>
 492    Bind to the <code>over</code> event by type: <code>dropover</code>.
 493  </dt>
 494  <dd>
 495  <pre><code>$('.selector').bind('dropover', function(event, ui) {
 496    ...
 497  });</code></pre>
 498  </dd>
 499  
 500      </dl>
 501    </div>
 502  </li>
 503  
 504  
 505  <li class="event" id="event-out">
 506    <div class="event-header">
 507      <h3 class="event-name"><a href="#event-out">out</a></h3>
 508      <dl>
 509        <dt class="event-type-label">Type:</dt>
 510          <dd class="event-type">dropout</dd>
 511      </dl>
 512    </div>
 513    <div class="event-description">
 514      <p>This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.</p>
 515    </div>
 516    <div class="event-examples">
 517      <h4>Code examples</h4>
 518      <dl class="event-examples-list">
 519      
 520  <dt>
 521    Supply a callback function to handle the <code>out</code> event as an init option.
 522  </dt>
 523  <dd>
 524  <pre><code>$('.selector').droppable({
 525     out: function(event, ui) { ... }
 526  });</code></pre>
 527  </dd>
 528  
 529      
 530  <dt>
 531    Bind to the <code>out</code> event by type: <code>dropout</code>.
 532  </dt>
 533  <dd>
 534  <pre><code>$('.selector').bind('dropout', function(event, ui) {
 535    ...
 536  });</code></pre>
 537  </dd>
 538  
 539      </dl>
 540    </div>
 541  </li>
 542  
 543  
 544  <li class="event" id="event-drop">
 545    <div class="event-header">
 546      <h3 class="event-name"><a href="#event-drop">drop</a></h3>
 547      <dl>
 548        <dt class="event-type-label">Type:</dt>
 549          <dd class="event-type">drop</dd>
 550      </dl>
 551    </div>
 552    <div class="event-description">
 553      <p>This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on.
 554  ui.draggable represents the draggable.</p>
 555    </div>
 556    <div class="event-examples">
 557      <h4>Code examples</h4>
 558      <dl class="event-examples-list">
 559      
 560  <dt>
 561    Supply a callback function to handle the <code>drop</code> event as an init option.
 562  </dt>
 563  <dd>
 564  <pre><code>$('.selector').droppable({
 565     drop: function(event, ui) { ... }
 566  });</code></pre>
 567  </dd>
 568  
 569      
 570  <dt>
 571    Bind to the <code>drop</code> event by type: <code>drop</code>.
 572  </dt>
 573  <dd>
 574  <pre><code>$('.selector').bind('drop', function(event, ui) {
 575    ...
 576  });</code></pre>
 577  </dd>
 578  
 579      </dl>
 580    </div>
 581  </li>
 582  
 583      </ul>
 584    </div>
 585    <div id="methods">
 586      <h2 class="top-header">Methods</h2>
 587      <ul class="methods-list">
 588        
 589  <li class="method" id="method-destroy">
 590    <div class="method-header">
 591      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 592      <dl>
 593        <dt class="method-signature-label">Signature:</dt>
 594          <dd class="method-signature">.droppable( 'destroy'
 595  
 596  
 597  
 598  
 599  
 600  
 601  
 602  )</dd>
 603      </dl>
 604    </div>
 605    <div class="method-description">
 606      <p>Remove the droppable functionality completely. This will return the element back to its pre-init state.</p>
 607    </div>
 608  </li>
 609  
 610  
 611  <li class="method" id="method-disable">
 612    <div class="method-header">
 613      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 614      <dl>
 615        <dt class="method-signature-label">Signature:</dt>
 616          <dd class="method-signature">.droppable( 'disable'
 617  
 618  
 619  
 620  
 621  
 622  
 623  
 624  )</dd>
 625      </dl>
 626    </div>
 627    <div class="method-description">
 628      <p>Disable the droppable.</p>
 629    </div>
 630  </li>
 631  
 632  
 633  <li class="method" id="method-enable">
 634    <div class="method-header">
 635      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 636      <dl>
 637        <dt class="method-signature-label">Signature:</dt>
 638          <dd class="method-signature">.droppable( 'enable'
 639  
 640  
 641  
 642  
 643  
 644  
 645  
 646  )</dd>
 647      </dl>
 648    </div>
 649    <div class="method-description">
 650      <p>Enable the droppable.</p>
 651    </div>
 652  </li>
 653  
 654  
 655  <li class="method" id="method-option">
 656    <div class="method-header">
 657      <h3 class="method-name"><a href="#method-option">option</a></h3>
 658      <dl>
 659        <dt class="method-signature-label">Signature:</dt>
 660          <dd class="method-signature">.droppable( 'option'
 661  
 662  , optionName
 663  
 664  , <span class="optional">[</span>value<span class="optional">] </span>
 665  
 666  
 667  
 668  )</dd>
 669      </dl>
 670    </div>
 671    <div class="method-description">
 672      <p>Get or set any droppable option. If no value is specified, will act as a getter.</p>
 673    </div>
 674  </li>
 675  
 676  
 677      </ul>
 678    </div>
 679    <div id="theming">
 680      <h2 class="top-header">Theming</h2>
 681      <p>The jQuery UI Droppable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
 682  </p>
 683    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.droppable.css stylesheet that can be modified. These classes are highlighed in bold below.
 684  </p>
 685      
 686    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 687    &lt;div class=&quot;<strong>ui-droppable</strong>&quot;&gt;&lt;/div&gt;
 688    <p class="theme-note">
 689      <strong>
 690        Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
 691      </strong>
 692    </p>
 693  
 694    </div>
 695  </div>
 696  
 697  </p><!-- 
 698  Pre-expand include size: 27586 bytes
 699  Post-expand include size: 45489 bytes
 700  Template argument size: 25247 bytes
 701  Maximum: 2097152 bytes
 702  -->
 703  
 704  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3341-1!1!0!!en!2 and timestamp 20090604112211 -->