-
Notifications
You must be signed in to change notification settings - Fork 113
/
page-scale.html
133 lines (130 loc) · 5.58 KB
/
page-scale.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drag and Drop Interaction Ideas | Page Scale</title>
<meta name="description" content="Inspiration for drag and drop interactions for the modern UI" />
<meta name="keywords" content="drag and drop, interaction, inspiration, web design, ui" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/page-scale.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body class="skin-2">
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/MorphingSearch/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=21275"><span>Back to the Codrops Article</span></a></span>
</div>
<div class="content">
<header class="codrops-header">
<h1>Drag and Drop Interaction Ideas <span>Inspiration for drag and drop interactions for the modern UI</span></h1>
<nav class="codrops-demos">
<a href="index.html">Bottom Area</a>
<a href="sidebar.html">Sidebar</a>
<a class="current-demo" href="page-scale.html">Page Scale</a>
<a href="modal.html">Modal</a>
<a href="icons.html">Icons</a>
<a href="bottom-slide.html">Bottom Slide</a>
<a href="reveal.html">Reveal</a>
</nav>
</header>
<div id="grid" class="grid clearfix">
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-star-o"></i></div>
</div>
<!-- Related demos -->
<section class="related">
<p>If you enjoyed this demo you might also like:</p>
<a href="http://tympanus.net/Development/DraggableDualViewSlideshow/">
<img src="img/related/DualViewSlideshow.png" alt="Dual-View Slideshow Image"/>
<h3>Draggable Dual-View Slideshow</h3>
</a>
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
<img src="img/related/MorphingButtons.png" alt="Morphing Buttons Image" />
<h3>Morphing Buttons Concept</h3>
</a>
</section>
</div><!-- /content -->
</div><!-- /container -->
<div id="drop-area" class="drop-area">
<div>
<div class="drop-area__item"><div><div class="dummy"></div></div></div>
<div class="drop-area__item"><div><div class="dummy"></div></div></div>
<div class="drop-area__item"><div><div class="dummy"></div></div></div>
<div class="drop-area__item"><div><div class="dummy"></div></div></div>
</div>
</div>
<div class="drop-overlay"></div>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/dragdrop.js"></script>
<script>
(function() {
var body = document.body,
dropArea = document.getElementById( 'drop-area' ),
droppableArr = [], dropAreaTimeout;
// initialize droppables
[].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {
droppableArr.push( new Droppable( el, {
onDrop : function( instance, draggableEl ) {
// show checkmark inside the droppabe element
classie.add( instance.el, 'drop-feedback' );
clearTimeout( instance.checkmarkTimeout );
instance.checkmarkTimeout = setTimeout( function() {
classie.remove( instance.el, 'drop-feedback' );
}, 800 );
// ...
}
} ) );
} );
// initialize draggable(s)
[].slice.call(document.querySelectorAll( '#grid .grid__item' )).forEach( function( el ) {
new Draggable( el, droppableArr, {
draggabilly : { containment: document.body },
helper : true,
onStart : function() {
// add class 'drag-active' to body
classie.add( body, 'drag-active' );
// clear timeout: dropAreaTimeout (toggle drop area)
clearTimeout( dropAreaTimeout );
// show dropArea
classie.add( dropArea, 'show' );
},
onEnd : function( wasDropped ) {
var afterDropFn = function() {
// hide dropArea
classie.remove( dropArea, 'show' );
// remove class 'drag-active' from body
classie.remove( body, 'drag-active' );
};
if( !wasDropped ) {
afterDropFn();
}
else {
// after some time hide drop area and remove class 'drag-active' from body
clearTimeout( dropAreaTimeout );
dropAreaTimeout = setTimeout( afterDropFn, 400 );
}
}
} );
} );
})();
</script>
</body>
</html>