Sortable实现拖动排序动画效果代码
代码语言:html
所属分类:拖放
代码描述:Sortable实现拖动排序动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); /*===== BASE =====*/ *, ::before, ::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "inter", sans-serif; background-color: #f8f8fc; } h1 { margin: 0; } a { text-decoration: none; } img { max-width: 100%; height: auto; } /*===== DRAG and DROP =====*/ .container, .drop-container { display: grid; } .container { height: 100vh; align-items: center; justify-content: center; } .drop-container { row-gap: 1rem; padding: 2rem; box-shadow: 4px 4px 16px #e1e1e1; box-shadow: 0px 4px 12px -1px rgba(0, 0, 0, 0.35); } .drop-container > div:nth-child(1) { background: #ffdd99; } .drop-container > div:nth-child(2) { background: #bfc1ff; } .drop-container > div:nth-child(3) { background: #fcb8b3; } .drop-container > div:nth-child(4) { background: #bfffc5; } .drop__card, .drop__data { display: flex; align-items: center; } .drop__card { width: 360px; justify-content: space-between; padding: 0.75rem 1.25rem 0.75rem 0.75rem; background-color: #f8f8fc; 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; object-fit: cover; } .drop__name { font-size: 1rem; color: #272a3a; font-weight: 500; } .drop__profession { font-size: 0.813rem; color: #8a8eaa; } .drop__social { margin: 0 0.375rem; color: #8a8eaa; transition: 0.4s; } .drop__social:hover { color: #272a3a; } /* 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="container"> <div class="drop-container" id="drop-items"> <div class="drop__card"> <div class="drop__data"> <img src="//repo.bfw.wiki/bfwrepo/image/5e4b4000794db.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Naruto Uzumaki" class="drop__img"> <div> <h1 class="drop__name">Naruto Uzumaki</h1> <span class="drop__profession">Hookage</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_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0