Use your mouse to click and draw a rectangle around any items from the area belowSelection area
|
Drag and drop the selected items into any of the two areas belowDrop area 1Drop area 2 |
HTML source
<div id="selection-area">
<img id="img_0" class="test-item" src="/data/demo/img_0.jpg" />
<img id="img_1" class="test-item" src="/data/demo/img_1.jpg" />
<img id="img_2" class="test-item" src="/data/demo/img_2.jpg" />
<img id="img_3" class="test-item" src="/data/demo/img_3.jpg" />
<img id="img_4" class="test-item" src="/data/demo/img_4.jpg" />
<img id="img_5" class="test-item" src="/data/demo/img_5.jpg" />
<img id="img_6" class="test-item" src="/data/demo/img_6.jpg" />
<img id="img_7" class="test-item" src="/data/demo/img_7.jpg" />
<img id="img_8" class="test-item" src="/data/demo/img_8.jpg" />
<img id="img_9" class="test-item" src="/data/demo/img_9.jpg" />
</div>
<div id="drop-area-1" style="height: 200px"></div>
<div id="drop-area-2" style="height: 200px"></div>
<img id="img_0" class="test-item" src="/data/demo/img_0.jpg" />
<img id="img_1" class="test-item" src="/data/demo/img_1.jpg" />
<img id="img_2" class="test-item" src="/data/demo/img_2.jpg" />
<img id="img_3" class="test-item" src="/data/demo/img_3.jpg" />
<img id="img_4" class="test-item" src="/data/demo/img_4.jpg" />
<img id="img_5" class="test-item" src="/data/demo/img_5.jpg" />
<img id="img_6" class="test-item" src="/data/demo/img_6.jpg" />
<img id="img_7" class="test-item" src="/data/demo/img_7.jpg" />
<img id="img_8" class="test-item" src="/data/demo/img_8.jpg" />
<img id="img_9" class="test-item" src="/data/demo/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('Meteora.Selection');
Meteora.onStart(
function() {
new Selection(
{
itemClass: 'test-item',
dropArea: [ 'drop-area-1', 'drop-area-2' ],
selectionArea: 'selection-area',
onDrop: function(items, dropArea) {
for (var i = 0; i < items.length; i++) {
dropArea.appendChild(items[i]);
items[i].setStyles({
'position': '',
'left': '',
'top': ''
});
log('You dropped the element with id: '+items[i].id+' within the drop area: '+dropArea.id);
}
}
}
);
}
);
Meteora.onStart(
function() {
new Selection(
{
itemClass: 'test-item',
dropArea: [ 'drop-area-1', 'drop-area-2' ],
selectionArea: 'selection-area',
onDrop: function(items, dropArea) {
for (var i = 0; i < items.length; i++) {
dropArea.appendChild(items[i]);
items[i].setStyles({
'position': '',
'left': '',
'top': ''
});
log('You dropped the element with id: '+items[i].id+' within the drop area: '+dropArea.id);
}
}
}
);
}
);