Sortable实现图文联系人卡片拖动排序效果代码
代码语言:html
所属分类:拖放
代码描述:Sortable实现图文联系人卡片拖动排序效果代码
代码标签: Sortable 图文 联系人 卡片 拖动 排序
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap'> <style> /*===== VARIABLES CSS =====*/ :root { /*===== Colors =====*/ --first-color: #272a3a; --first-color-light: #8a8eaa; --first-color-lighten: #f8f8fc; /*===== Font and typography =====*/ --body-font: "Ubuntu", sans-serif; --normal-font-size: 1rem; --smaller-font-size: 0.813rem; } /*===== BASE =====*/ *, ::before, ::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--body-font); background-color: var(--first-color-lighten); } h1 { margin: 0; } a { text-decoration: none; } img { max-width: 100%; height: auto; } /*===== DRAG and DROP =====*/ .drop, .drop_container { display: grid; } .drop { height: 100vh; align-items: center; justify-content: center; } .drop_container { row-gap: 1rem; padding: 2rem; box-shadow: 4px 4px 16px #e1e1e1; } .drop_card, .drop_data { display: flex; align-items: center; } .drop_card { width: 360px; justify-content: space-between; padding: 0.75rem 1.25rem.75rem 0.75rem; background-color: var(--first-color-lighten); box-shadow: 4px 4px 16px #e1e1e1, -2px -2px 16px #fff; border-radius: 2.5rem; } .drop_img { width: 55px; height: 55px; border-radius: 50%; margin-right: 1rem; } .drop_name { font-size: var(--normal-font-size); color: var(--first-color); font-weight: 500; } .drop_profession { font-size: var(--smaller-font-size); color: var(--first-color-light); } .drop_social { margin: 0 0.375rem; color: var(--first-color-light); transition: 0.4s; } .drop_social:hover { color: var(--first-color); } /* Class name for the chosen item */ .sortable-chosen { box-shadow: 8px 8px 32px #e1e1e1; } /* Class name for the dragging item */ .sortable-drag { opacity: 0; } </style> </head> <body > <div class="drop"> <div class="drop_container" id="drop-items"> <div class="drop_card"> <div class="drop_data"> <img src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="img1" class="drop_img"> <div> <h1 class="drop_name">Clay</h1> <span class="drop_profession">Web developer</span> </div> </div> <div> <a href="#" class="drop_social"><i class='bx bxl-instagram'></i></a> <a href="#" class="drop_social"><i class='bx bxl-facebook'></i></a> <a href="#" class="drop_social"><i class='bx bxl-twitter'></i></a> </div> </div> <div class="drop_card"> <div class="drop_data"> <img src="//repo..........完整代码请登录后点击上方下载按钮下载查看
网友评论0