uikit实现可拖拽自适应任务分配管理卡片面板效果代码
代码语言:html
所属分类:拖放
代码描述:uikit实现可拖拽自适应任务分配管理卡片面板效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="uk-background-muted"> <head> <meta charset="UTF-8"> <!-- UIkit CSS --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css"> <!-- UIkit JS --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit-icons.min.js"></script> <style> .uk-flex-none { flex: none !important; } /** * Custom CSS **/ .uk-card-title > small { font-size: 50%; } .user-group { padding-left: 15px; } .user-group > li { display: inline; } .user-group > li:before, .user-group > li:after { content: none; } .user-group > li:hover > img { transform: scale(1.3); cursor: pointer; z-index: 10; } .user-group > li > img { border: 2px solid #fff; margin-left: -15px; position: relative; } .uk-container{ margin-top: 30px; } </style> </head> <body> <div class="uk-container"> <div uk-height-viewport> <div class="uk-child-width-1-3@s uk-height-1-1 uk-grid-match uk-grid-collapse uk-grid-divider" uk-grid> <div class="uk-flex-column"> <h4 class="uk-flex-none">Planned</h4> <div class="uk-flex-1" uk-sortable="group: sortable-group"> <div class="uk-margin"> <div class="uk-card uk-card-hover uk-card-default uk-card-small"> <div class="uk-card-body"> <h3 class="uk-card-title uk-margin-remove">Job title <small class="uk-text-muted uk-float-right">#1001</small></h3> <p class="uk-text-meta uk-margin-remove">Lorem ipsum dolor sit amet</p> <ul class="user-group"> <li><img class="uk-border-circle uk-box-shadow-small uk-box-shadow-hover-medium" width="40" height="40" src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></li> <li><img class="uk-border-circle uk-box-shadow-small uk-box-shadow-hover-medium" width="40" height="40" src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></li> </ul> </div> <div class="uk-card-footer uk-background-muted"> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="icon: file-edit"></a> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="icon: history"></a> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="icon: comments"></a>3 <a href="#" class="uk-icon-link uk-float-right" uk-icon="icon: trash"></a> </div> </div> </div> <div class="uk-margin"> <div class="uk-card uk-card-hover uk-card-default uk-card-small"> <div class="uk-card-body"> <h3 class="uk-card-title uk-margin-remove">Job title <small class="uk-text-muted uk-float-right">#1002</small></h3> <p class="uk-text-meta uk-margin-remove">Lorem ipsum dolor sit amet</p> <ul class="user-group"> <li><img class="uk-border-circle uk-box-shadow-small uk-box-shadow-hover-medium" width="40" height="40" src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></li> <li><img class="uk-border-circle uk-box-shadow-small uk-box-shadow-hover-medium" width="40" height="40" src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></li> <li><img class="uk-border-circle uk-box-shadow-small uk-box-shadow-hover-medium" width="40" height="40" src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></li> </ul> </div> <div class="uk-card-footer uk-background-muted"> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="icon: file-edit"></a> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="icon: history"></a> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="icon: comments"></a> <a href="#" class="uk-icon-link uk-float-right" uk-icon="icon: trash"></a> </div> </div> </div> </div> </div> <div class="uk-flex-column"> <h4 class="uk-flex-none">In progress</h4> <div class="uk-flex-1" uk-sortable="group: sortable-group"> <div class="uk-margin"> <div class="uk-card uk-card-hover uk-card-default uk-card-small"> <div class="uk-card-b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0