Control.Selection

Use your mouse to click and draw a rectangle around any items from the area below

Selection area

Drag and drop the selected items into any of the two areas below

Drop area 1

Drop area 2

HTML source

<div id="selection-area">
  <img id="img_0" class="test-item" src="/media/demo/images/img_0.jpg" />
  <img id="img_1" class="test-item" src="/media/demo/images/img_1.jpg" />
  <img id="img_2" class="test-item" src="/media/demo/images/img_2.jpg" />
  <img id="img_3" class="test-item" src="/media/demo/images/img_3.jpg" />
  <img id="img_4" class="test-item" src="/media/demo/images/img_4.jpg" />
  <img id="img_5" class="test-item" src="/media/demo/images/img_5.jpg" />
  <img id="img_6" class="test-item" src="/media/demo/images/img_6.jpg" />
  <img id="img_7" class="test-item" src="/media/demo/images/img_7.jpg" />
  <img id="img_8" class="test-item" src="/media/demo/images/img_8.jpg" />
  <img id="img_9" class="test-item" src="/media/demo/images/img_9.jpg" />
</div>

<div id="drop-area-1" style="height: 200px"></div>

<div id="drop-area-2" style="height: 200px"></div>

Javascript source

Meteora.uses('Control.Selection');

Meteora.onStart(
  function() {
    new Selection(
      {
        itemClass: 'test-item',
        dropArea: ['drop-area-1', 'drop-area-2'],
        selectionArea: 'selection-area',
        onDrop: function(items, dropArea) {
          var elements = [];
          for (var i = 0; i < items.length; i++) {
            dropArea.appendChild(items[i]);
            items[i].setStyle({
              'position': '',
              'left': '',
              'top': ''
            });
            elements.push(items[i].id);
          }
          alert('You dropped the elements: '+elements.join(', ')+' within the drop area: '+dropArea.id);
        }
      }
    );
  }
);

Documentation

If you're looking for more documentation about this widget, you may want to read Control.Selection documentation