What does this control do?
This control allows you to select and work with the selection of a set if items that belongs to the same class. The control will draw a selection rectangle around the elements, when the selection is completed, the selected elements will be arranged in a draggable box and the user will be able to discard or drop those selected items into the drop area.
For an usage example check out the Meteora.Selection demo.
How to use it
In order to be able to use this control, paste this line of javascript right
at the beginning of your script tag:
You may then be able to invoke the Selection Widget.
Meteora.onStart(
function() {
new Selection(
{
// CLASSNAME
// The draggable items' className.
'itemClass': 'test-item',
// ELEMENT
// IDs or object references to areas where items can be dropped.
'dropArea': ['drop-area-1', 'drop-area-2'],
// ELEMENT
// ID or reference of the are where items can be selected.
'selectionArea': 'selection-area',
// CALLBACK
// What to do when an item is dropped.
'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(', ')+' into the drop area: '+dropArea.id);
}
}
);
}
);