拖拉式界面设计 - 边栏工作台

Drag and Drop Interaction Ideas 在边栏位置呈现可落位（Droppable）的工作区域。

界面组件

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

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

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-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></i>
                </div>
                <div class="grid__item"><i class="fa fa-fw fa-image"></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）的工作区域。

界面组件

账户激活的界面交互动画设计

jQuery 响应式菜单设计模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：