[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'Droppable Demos',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Droppable',
  13                  desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
  14                  html: { url: 'templates/ui.droppable.photos.html' },
  15                  destroy: '$(".droppable-photos-container").droppable("destroy");',
  16                  options: [
  17                      {
  18                          desc: 'Photo manager',
  19                          source: '$(".droppable-photos-container").droppable({ accept: ".img_content", drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } });'
  20                      }
  21                  ]
  22              },
  23  
  24              {
  25                  title: 'Droppable',
  26                  desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
  27                  html: '<div class="block">.block</div><div class="draggable red">.red</div><div class="draggable green">.green</div><div class="drop">Drop on me!<br><br></div>',
  28                  destroy: '$(".drop").droppable("destroy");',
  29                  options: [
  30                      {
  31                          desc: 'Accept all, Active Class',
  32                          source: '$(".drop").droppable({ accept: ".block, .red, .green", activeClass: "droppable-active", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  33                      },
  34                      {
  35                          desc: 'Only accept .block',
  36                          source: '$(".drop").droppable({ accept: ".block", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  37                      },
  38                      {
  39                          desc: 'Only accept .red',
  40                          source: '$(".drop").droppable({ accept: ".red", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  41                      },
  42                      {
  43                          desc: 'Only accept .green',
  44                          source: '$(".drop").droppable({ accept: ".green", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  45                      },
  46                      {
  47                          desc: 'Accept all, Hover Class',
  48                          source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "droppable-hover", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  49                      },
  50                      {
  51                          desc: 'Accept all, Mouse tolerance',
  52                          source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "pointer", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  53                      },
  54                      {
  55                          desc: 'Accept all, Touch tolerance',
  56                          source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "touch", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
  57                      },
  58                      {
  59                          desc: 'Accept all, Activate/Deactivate callbacks',
  60                          source: '$(".drop").droppable({ accept: ".block, .red, .green, .red, .green", activate: function(ev, ui) { $(this).append("Activate! "); }, deactivate: function(ev, ui) { $(this).append("Deactivate! "); }});'
  61                      },
  62                      {
  63                          desc: 'Accept all, Over/Out callbacks',
  64                          source: '$(".drop").droppable({ accept: ".block, .red, .green", over: function(ev, ui) { $(this).append("Over! "); }, out: function(ev, ui) { $(this).append("Out! "); }});'
  65                      }
  66                  ]
  67              }
  68          ],
  69  
  70          onRenderEnd: function() {
  71              $(".block, .green, .red").draggable({helper: "clone"});
  72  
  73              $('ul.droppable-gallery img').addClass('img_content').draggable({
  74                  helper: 'clone'
  75              });
  76  
  77          }
  78  
  79      };
  80  
  81      $(function(){
  82  
  83          uiRenderDemo(model);
  84  
  85      });
  86  
  87  </script>