[Summary view] [Print] [Text view]

   1  /*

   2   * The very first increment of Droppables&Draggables demo. The code is going to

   3   * be more concise (remove unnecessary code repetitions etc.). And imho the

   4   * photo management is a good candidate for demonstration of more jQuery UI

   5   * components (sortables, selectables...). More to come...

   6   *

   7   */
   8  
   9  $(window).bind('load', function() {
  10      // make images in the gallery draggable

  11      $('ul.gallery img').addClass('img_content').draggable({
  12          helper: 'clone'
  13      });
  14  
  15      // make the trash box droppable, accepting images from the content section only

  16      $('#trash div').droppable({
  17          accept: '.img_content',
  18          activeClass: 'active',
  19          drop: function(ev, ui) {
  20              var $that = $(this);
  21              ui.draggable.parent().fadeOut('slow', function() {
  22                  ui.draggable
  23                      .hide()
  24                      .appendTo($that)
  25                      .fadeIn('slow')
  26                      .animate({
  27                          width: '72px',
  28                          height: '54px'
  29                      })
  30                      .removeClass('img_content')
  31                      .addClass('img_trash');
  32                  $(this).remove();
  33              });
  34          }
  35      });
  36  
  37      // make the shredder box droppable, accepting images from both content and trash sections

  38      $('#shred div').droppable({
  39          accept: '.img_content, .img_trash',
  40          activeClass: 'active',
  41          drop: function(ev, ui) {
  42              var $that = $(this);
  43              // images from the content

  44              if (ui.draggable.hasClass('img_content')) {
  45                  ui.draggable.parent().fadeOut('slow', function() {
  46                      ui.draggable
  47                          .appendTo($that)
  48                          .animate({
  49                              width: '0',
  50                              height: '0'
  51                          }, 'slow', function(){
  52                              $(this).remove();
  53                          });
  54                      $(this).remove();
  55                  });
  56              }
  57              // images from the trash

  58              else if (ui.draggable.hasClass('img_trash')) {
  59                  ui.draggable
  60                      .appendTo($that)
  61                      .animate({
  62                          width: '0',
  63                          height: '0'
  64                      }, 'slow', function(){
  65                          $(this).remove();
  66                      });
  67              }
  68          }
  69      });
  70  
  71      // make the gallery droppable as well, accepting images from the trash only

  72      $('ul.gallery').droppable({
  73          accept: '.img_trash',
  74          activeClass: 'active',
  75          drop: function(ev, ui) {
  76              var $that = $(this);
  77              ui.draggable.fadeOut('slow', function() {
  78                  var $item = createGalleryItem(this).appendTo($that);
  79                  $(this)
  80                      .removeClass('img_trash')
  81                      .addClass('img_content')
  82                      .css({ width: '144px', height: '108px' })
  83                      .show();
  84                  $item.fadeIn('slow');
  85              });
  86          }
  87      });
  88  
  89      // handle the trash icon behavior

  90      $('a.tb_trash').livequery('click', function() {
  91          var $this = $(this);
  92          var $img = $this.parent().siblings('img');
  93          var $item = $this.parents('li');
  94  
  95          $item.fadeOut('slow', function() {
  96              $img
  97                  .hide()
  98                  .appendTo('#trash div')
  99                  .fadeIn('slow')
 100                  .animate({
 101                      width: '72px',
 102                      height: '54px'
 103                  })
 104                  .removeClass('img_content')
 105                  .addClass('img_trash');
 106              $(this).remove();
 107          });
 108  
 109          return false;
 110      });
 111  
 112      // handle the magnify button

 113      $('a.tb_supersize').livequery('click', function() {
 114          $('<img width="576" height="432">')
 115              .attr('src', $(this).attr('href'))
 116              .appendTo('#body_wrap')
 117              .displayBox();
 118          return false;
 119      });
 120  
 121  
 122      var sliderChange = function(event, ui){
 123          $('.img_content').each(function(index, item){
 124              var _new = 1.44    * $('#sliderSize').slider("value");
 125  
 126              $(this).css("width", _new+'px')
 127                  .parent().css("width", (_new+16)+'px');
 128  
 129          });
 130      }
 131      $('#sliderSize').slider({
 132          startValue : 100,
 133          min : 50,
 134          max : 100,
 135          stepping : 5,
 136          slide : sliderChange,
 137          change : sliderChange
 138      });
 139  
 140  });
 141  
 142  function createGalleryItem(img) {
 143      var title = img.getAttribute('alt');
 144      var href = img.getAttribute('src').replace(/thumbs\//, '');
 145  
 146      var $item = $('<li><p>'+title+'</p><div><a href="#" title="Trash me" class="tb_trash">Trash me</a><a href="'+href+'" title="See me supersized" class="tb_supersize">See me supersized</a></div></li>').hide();
 147      $item.prepend($(img));
 148  
 149      return $item;
 150  }