veloxi实现拖动列表项排序效果代码
代码语言:html
所属分类:拖放
代码描述:veloxi实现拖动列表项排序效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body { padding: 50px 0 0; margin: 0; display: flex; align-items: center; justify-content: center; } .list { display: flex; flex-direction: column; gap: 10px 0; width: 100%; max-width: 200px; } .item { font-size: 18px; background: whitesmoke; padding: 8px 10px; border-radius: 5px; color: #222; font-weight: 500; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-action: none; will-change: transform; box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2); } </style> </head> <body translate="no"> <div class="list"> <div class="item" data-vel-plugin="DragToReorderPlugin" data-vel-view="item" > Item 1 </div> <div class="item" data-vel-plugin="DragToReorderPlugin" data-vel-view="item" > Item 2 </div> <div class="item" data-vel-plugin="DragToReorderPlugin" data-vel-view="item" > Item 3 </div> <div class="item" data-vel-plugin="DragToReorderPlugin" data-vel-view="item" > Item 4 </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/veloxi.min.js"></script> <script > class DragToReorderPlugin extends Veloxi.Plugin { static pluginName = 'DragToReorderPlugin' dragEventPlugin = this.useEventPlugin(Veloxi.DragEventPlugin) items draggingItem = null itemIdSlotMap = new Map() slotPositionMap = new Map() setup() { this.items = this.getViews('item') this.items.forEach((item, index) => { this.assignItemToSlot(item, index) this.dragEventPlug.........完整代码请登录后点击上方下载按钮下载查看
网友评论0