packery
Version:
Gapless, draggable grid layouts
188 lines (157 loc) • 4.82 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Draggabilly</title>
<link rel="stylesheet" href="css/examples.css" />
<style>
.item.expanded {
width: 100% ;
}
#horiz {
height: 360px;
}
.packery-drop-placeholder {
border: 3px dashed #333;
}
</style>
</head>
<body>
<h1>Draggabilly</h1>
<div id="ex4" class="container fluid has-padding">
<div class="item w4"></div>
<div class="item h4"></div>
<div class="item w2"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w4"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w4"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<div id="ex6" class="container fluid has-padding"></div>
<div id="horiz" class="container has-padding">
<div class="item w4"></div>
<div class="item h4"></div>
<div class="item w2"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w4"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w4"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../bower_components/draggabilly/draggabilly.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/rect.js"></script>
<script src="../js/packer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/packery.js"></script>
<script src="examples.js"></script>
<script>
function bindDraggies( packery ) {
var draggies = [];
var item, draggie;
for ( var i=0, len = packery.items.length; i < len; i++ ) {
item = packery.items[i].element;
draggie = new Draggabilly( item );
packery.bindDraggabillyEvents( draggie );
draggies.push( draggie );
}
packery.on( 'dragItemPositioned', function( item ) {
console.log( 'drag item positioned', item.position.x, item.position.y );
});
return draggies;
}
var ex4 = document.getElementById('ex4');
var packery4 = new Packery( ex4, {
columnWidth: 50,
rowHeight: 50,
transitionDuration: '0.6s'
});
var layoutCount4 = 0;
packery4.on( 'layoutComplete', function( packery ) {
console.log( 'completed layouts', ++layoutCount4 );
});
var ex6 = document.getElementById('ex6');
appendRandomSizedItems( ex6 );
var packery6 = new Packery( ex6, {
itemSelector: '.item',
transitionDuration: '0.6s',
gutter: 10
});
window.packery4 = packery4;
( function() {
var draggies = bindDraggies( packery4 );
// when clicked toggle expanded
function onDragEnd() {
var p1 = this.position;
var p2 = this.startPosition;
// only proceed if stuff has moved
if ( p1.x !== p2.x || p1.y !== p2.y ) {
return;
}
// dragger didn't move
var isExpanded = this.element.classList.contains('expanded' );
this.element.classList.toggle('expanded');
if ( !isExpanded ) {
// HACK unplace first
packery4.unplace( this.element );
packery4.fit( this.element );
} else {
packery4.layout();
}
}
for ( var i=0, len = draggies.length; i < len; i++ ) {
var draggie = draggies[i];
draggie.on( 'dragEnd', onDragEnd );
}
})();
bindDraggies( packery6 );
( function() {
var pckry = new Packery( '#horiz', {
columnWidth: 50,
rowHeight: 50,
horizontal: true,
transitionDuration: '0.8s'
});
bindDraggies( pckry );
})();
</script>
</body>
</html>