jquery ui拖动排序
代码语言:html
所属分类:拖放
代码描述:jquery ui拖动排序
代码标签: 排序
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui拖动排序</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 350px; margin: 60px auto; } .container:after { content: ""; display: block; clear: both; } .drag { width: 100%; height: 60px; float: left; margin: -8px 0; } ul li { list-style: none; } .innerdiv { padding: 10px; height: 100%; } .innerdiv2 { border: 1px solid #bdb9b9; background: #fff; height: 100%; } .move { width: 65px; height: 100%; background: pink; float: right; cursor: pointer; } .msg { display: inline-block; width: 130px; padding: 6px 6px 6px 12px; vertical-align: top; } .btn { background: pink; color: #fff; padding: 0px 10px; border-radius: 4px; border: 1px; height: 30px; cursor: pointer; font-size: 1.4rem; float: right; margin-right: 10px; margin-top: 10px; } </style> </head> <body> <div class="container"> <ul class="sortable"> <li id="draggable1" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move"></div> <span class="msg">list1</span> </div> </div> </li> <li id="draggable2" class="drag"> <div class="innerdiv"> <div class="innerdiv2"> <div class="move"></div> <span class="msg">list2</span> </div> </div> </li> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0