拖拉式界面设计 - 弹出式工作台

Drag and Drop Interaction Ideas 以屏幕居中弹出框来呈现可落位（Droppable）的工作区域。

界面组件

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

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

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-file-archive-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-image-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-word-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-excel-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-code-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-pdf-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-code-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-sound-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-video-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-archive-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-image-o"></i></div>
					<div class="grid__item"><i class="fa fa-fw fa-file-sound-o"></i></div>
			</div>
        </div>
        
    </div>
    
    <div id="drop-area" class="drop-area">
        <div>
            <div class="drop-area__item">
                <div class="dummy"></div>
            </div>
            <div class="drop-area__item">
                <div class="dummy"></div>
            </div>
            <div class="drop-area__item">
                <div class="dummy"></div>
            </div>
            <div class="drop-area__item">
                <div class="dummy"></div>
            </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
                    },
                    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 以屏幕居中弹出框来呈现可落位（Droppable）的工作区域。

界面组件

编辑器支持Emmet

快捷键

Drag and Drop Interaction Ideas 以屏幕居中弹出框来呈现可落位（Droppable）的工作区域。

界面组件

一组消息弹出框界面组件

CSS3 悬停时两侧出现菜单的设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：