js实现拖动排序动画效果代码
代码语言:html
所属分类:拖放
代码描述:js实现拖动排序动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import "//repo.bfw.wiki/bfwrepo/css/open-props.css" layer(design.system); @import "//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css" layer(demo.support); @layer demo { @keyframes drop-zone { from { box-shadow: 0 0 0 0 #0008 } to { box-shadow: 0 0 0 25px #0000 } } li.over { outline: 2px dashed var(--link); @media (prefers-reduced-motion: no-preference) { animation: drop-zone 1.5s var(--ease-out-5) infinite; } > * { pointer-events: none; } } [draggable] { cursor: grab; user-select: none; &:active { cursor: grabbing; } } /* optimization: disguises the crossfade on the gif, show the live gif always */ ::view-transition-old(yes-this-keeps-animating-during-morph) { display: none; } ::view-transition-new(yes-this-keeps-animating-during-morph) { animation: none; } } @layer demo.support { body { display: grid; place-content: center; padding: var(--size-5); gap: var(--size-5); } ol { display: grid; gap: var(--size-3); justify-items: start; } ol > li { background: var(--surface-2); border: 1px solid transparent; padding-block: var(--size-3); padding-inline: var(--size-4); border-radius: var(--radius-3); box-shadow: var(--shadow-4); @media (prefers-color-scheme: light) { background: white; } } } </style> </head> <body> <ol id="$demo"> <li draggable="true" style="view-transition-name: card-1">CSS</li> <li draggable="true" style="view-transition-name: card-2">HTML</li> <li draggable="true" style="view-transition-name: card-3">JS</li> <li draggable="true" style="view-transition-name: yes-this-keeps-animating-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0