drag-arrange.js拖拽排序插件资源-CSDN文库

共4个文件

js：3个

html：1个

javascript

需积分: 5 131 浏览量 2023-04-24 01:38:55 上传评论收藏 36KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

拖拽排序插件.rar （4个子文件）

drag-arrange.js 8KB

index.html 4KB

jquery.min.js 91KB

drag-arrange.min.js 2KB

<html> <head> <title>drag-arrange.js拖拽排序插件 www.bootstrapmb.com</title> <style> body { font-family: arial; background: rgb(242, 244, 246); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } h3 { color: rgb(199, 204, 209); font-size: 28px; text-align: center; } #elements-container { text-align: center; } .draggable-element { display: inline-block; width: 200px; height: 200px; background: white; border: 1px solid rgb(196, 196, 196); line-height: 200px; text-align: center; margin: 10px; color: rgb(51, 51, 51); font-size: 30px; cursor: move; } .drag-list { width: 400px; margin: 0 auto; } .drag-list > li { list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0; font-size: 24px; } .drag-list .title { display: inline-block; width: 130px; padding: 6px 6px 6px 12px; vertical-align: top; } .drag-list .drag-area { display: inline-block; background: rgb(158, 211, 179); width: 60px; height: 40px; vertical-align: top; float: right; cursor: move; } .code { background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); width: 600px; margin: 22px auto; position: relative; } .code::before { content: 'Code'; background: rgb(80, 80, 80); width: 96%; position: absolute; padding: 8px 2%; color: rgb(255, 255, 255); } .code pre { margin-top: 50px; padding: 0 13px; font-size: 1em; } </style> </head> <body> <section class="showcase showcase-1"> <h3>Example 1</h3> <div id="elements-container"> <div class="draggable-element d-1">Drag 1</div> <div class="draggable-element d-2">Drag 2</div> <div class="draggable-element d-3">Drag 3</div> <div class="draggable-element d-4">Drag 4</div> </div> </section> <section class="code"> <pre> $('.draggable-element').arrangeable(); </pre> </section> <section class="showcase showcase-2"> <h3>Example 2</h3> <ul class="drag-list"> <li><span class="title">list 1</span><span class="drag-area"></span></li> <li><span class="title">list 2</span><span class="drag-area"></span></li> <li><span class="title">list 3</span><span class="drag-area"></span></li> <li><span class="title">list 4</span><span class="drag-area"></span></li> <li><span class="title">list 5</span><span class="drag-area"></span></li> <li><span class="title">list 6</span><span class="drag-area"></span></li> <li><span class="title">list 7</span><span class="drag-area"></span></li> </ul> </section> <section class="code"> <pre> $('li').arrangeable({dragSelector: '.drag-area'}); </pre> </section> <script src="jquery.min.js"></script> <script type="text/javascript" src="drag-arrange.js"></script> <script type="text/javascript"> $(function() { $('.draggable-element').arrangeable(); $('li').arrangeable({dragSelector: '.drag-area'}); }); </script> </body> </html>

评论收藏

内容反馈