packery
Version:
bin-packing layout library
109 lines (86 loc) • 2.42 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Draggabilly Packery</title>
<style>
.container {
width: 500px;
margin-bottom: 20px;
background: #EEE;
}
.item {
float: left;
width: 48px;
height: 48px;
/* margin: 2px;*/
border: 1px solid;
background: #ACE;
}
.item.w2 { width: 98px; }
.item.h2 { height: 98px; }
.item.w4 { width: 198px; }
.item.h4 { height: 198px; }
#ex4 {
width: 50%;
}
#ex6 {
width: 50%;
padding: 10px 20px 30px 40px;
}
.is-dragging,
.is-positioning-post-drag {
z-index: 10;
background: orange;
}
</style>
</head>
<body>
<h1>Packery</h1>
<div id="ex4" class="container">
<div id="b1" class="item w2 h2"></div>
<div id="b2" class="item w2 h2"></div>
</div>
<script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/classie/classie.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/draggabilly/draggabilly.js"></script>
<script src="../bower_components/doc-ready/doc-ready.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>
window.onload = function() {
var ex4 = document.getElementById('ex4');
var packery4 = new Packery( ex4, {
columnWidth: 50,
rowHeight: 50,
transitionDuration: '1.6s'
});
var b1 = document.querySelector('#b1');
var b2 = document.querySelector('#b2');
var draggie1 = new Draggabilly( b1 );
packery4.bindDraggabillyEvents( draggie1 );
var draggie2 = new Draggabilly( b2 );
packery4.bindDraggabillyEvents( draggie2 );
// simulate drag stuff
packery4.itemDragStart( b1 );
b1.style.left = '11px';
b1.style.top = '-14px';
packery4.itemDragMove( b1, 11, -14 );
packery4.itemDragEnd( b1 );
packery4.itemDragStart( b2 );
b2.style.left = '141px';
b2.style.top = '-14px';
packery4.itemDragMove( b2, 141, -14 );
packery4.itemDragEnd( b2 );
};
</script>
</body>
</html>