拖拉式界面设计 - 底部滑槽工作台

Drag and Drop Interaction Ideas 可拖拉项目落位时，滑槽会有一个放大动画。

界面组件

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2253
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

</head>

<body>
    <div class="container">
        <div class="content">
            <header class="codrops-header">
                <h1>拖拉式界面设计 - 底部滑槽工作台</h1>
            </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>
        </div>
        
    </div>
    
    <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="https://tympanus.net/Development/DragDropInteractions/js/draggabilly.pkgd.min.js"></script>
    <script src="https://tympanus.net/Development/DragDropInteractions/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>

Drag and Drop Interaction Ideas 可拖拉项目落位时，滑槽会有一个放大动画。

界面组件

编辑器支持Emmet

快捷键

Drag and Drop Interaction Ideas 可拖拉项目落位时，滑槽会有一个放大动画。

界面组件

使用jQuery和jQuery UI touch插件实现的滑块拖拉切换按钮

jQuery 响应式菜单设计模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：