<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自由拖动</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; text-align: center; line-height: 200px; font-family: "微软雅黑"; cursor: move; } .free:active,.moveOnX:active,.fragment:active,.container2:active,.fragment3:active{ background: #09F; } .free,.moveOnX,.fragment,.container2,.fragment3{ background: #fa0; width: 300px; height: 300px; } .container2{ width: 200px; height: 200px; } .container,.container3{ width: 500px; height: 200px; border: 2px solid red; } .fragment,.fragment3{ width: 100px; height: 100px; line-height: 100px; } </style> <script src="JS/jquery.min.js"></script> <script src="JS/draggabilly.pkgd.min.js"></script> </head> <body> <div class="free">我可以被自由拖动</div> <div class="moveOnX">我只能在X轴上移动</div> <div class="container"> <div class="fragment">容器里面移动</div> </div> <div class="container2">网格移动</div> <div class="container3"> <div class="fragment3">把手</div> </div> <script> $(".free").draggabilly(); $(".moveOnX").draggabilly({axis:"y"}); $(".fragment").draggabilly({containment:true}); $(".container2").draggabilly({grid:[50,50]}); $(".container3").draggabilly({handle:".fragment3"}); </script> </body> </html>
这是自由拖动的代码。
时间： 2024-08-06 11:55:08