forked from codrops/DragDropInteractions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bottom-slide.html
144 lines (141 loc) · 6.24 KB
/
bottom-slide.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
134
135
136
137
138
139
140
141
142
143
144
<!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 | Bottom Slide</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/bottom-slide.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body class="skin-5">
<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 href="page-scale.html">Page Scale</a>
<a href="modal.html">Modal</a>
<a href="icons.html">Icons</a>
<a class="current-demo" 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-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></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="dummy"></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-excel-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-pdf-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-sound-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-word-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-archive-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-text-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-archive-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-image-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-powerpoint-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-code-o"></i></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 },
scroll : true,
scrollable : '#drop-area',
scrollSpeed : 20,
scrollSensitivity : 10,
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>