Sortable实现拖动列表项排序效果代码
代码语言:html
所属分类:拖放
代码描述:Sortable实现拖动列表项排序效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <style> :root { --background: #EDEEF7; --gray: #EDEEF7; --white: #FCFCFC; --roboto: "Roboto", sans-serif; --robotoCondensed: "Roboto Condensed", sans-serif; } body { font-family: var(--robotoCondensed), sans-serif; font-size: 1rem; background: var(--background); display: flex; width: 100vw; height: 100vh; } *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; outline: none; } #team-members { display: flex; flex-direction: column; gap: 16px; margin: auto; padding: 24px; max-width: 400px; width: 100%; backaround-color: var(-white); border-radius: 32px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; } .team-member { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-height: 60px; padding: 16px; background-color: var(--white); border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.05) 0x 6px 24px 0px; font-size: 16px; z-index: 1; } .team-member:hover { cursor: -webkit-grab; cursor: grab; } .team-member-avatar { width: 3.75rem; height: 3.75rem; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .team-member-name { display: grid; gap: 0.125rem; } .team-member-name h3 { font-size: large; } .team-member-name p { font-size: smaller; } .team-member-chosen { box-shadow: 8px 8px 32px var(--gray); } .team-member-drag { opacity: 0.001; } .social-links { display: flex; flex-direction: row; gap: 6px; margin-left: auto; padding: 0; list-style-type: none; } .social-links i { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; } </style> </head> <body> <div id="team-members"> <article class="team-member"><img class="team-member-avatar" src="//repo.bfw.wiki/bfwrepo/image/649d3d1393275.png" alt="Team Member"/> <div class="team-member-name"> <h3>Cosmo Kramer</h3> <p>New York Man of Mystery</p> </div> <ul class="soc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0