jquery.nestable是目前经常用的拖动排序插件。很多论文或者博客,都说用到了ace.min.css,但是好像这个下载的有点困难,于是笔者自己精简出这部分代码,形成了行内样式,同时提供了静态实例。
具体的demo下载地址:jquery.nestable实现的拖动排序实例
单独附上ace.min.css代码:
/*ace.min.css精华缩略代码*/
.dd{position:relative;display:block;margin:0;padding:0;list-style:none;font-size:13px;line-height:20px}.dd-list{display:block;position:relative;margin:0;padding:0;list-style:none}.dd-list .dd-list{padding-left:30px}.dd-collapsed .dd-list{display:none}.dd-empty,.dd-item,.dd-placeholder{display:block;position:relative;margin:0;padding:0;min-height:20px;font-size:13px;line-height:20px}.dd-handle{display:block;margin:5px 0;padding:5px 10px;color:#333;text-decoration:none;border:1px solid #e7eaec;background:#f5f5f5;border-radius:3px;box-sizing:border-box;-moz-box-sizing:border-box}.dd-handle span{font-weight:700}.dd-handle:hover{background:#f0f0f0;cursor:pointer;font-weight:700}.dd-item>button{display:block;position:relative;cursor:pointer;float:left;width:25px;height:20px;margin:5px 0;padding:0;text-indent:100%;white-space:nowrap;overflow:hidden;border:0;background:0 0;font-size:12px;line-height:1;text-align:center;font-weight:700}.dd-item>button:before{content:'+';display:block;position:absolute;width:100%;text-align:center;text-indent:0}.dd-item>button[data-action=collapse]:before{content:'-'}#nestable2 .dd-item>button{font-family:FontAwesome;height:34px;width:33px;color:#c1c1c1}#nestable2 .dd-item>button:before{content:"\f067"}#nestable2 .dd-item>button[data-action=collapse]:before{content:"\f068"}.dd-empty,.dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.dd-empty{border:1px dashed #bbb;min-height:100px;background-color:#e5e5e5;background-image:-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);background-size:60px 60px;background-position:0 0,30px 30px}.dd-dragel{position:absolute;z-index:9999;pointer-events:none}.dd-dragel>.dd-item .dd-handle{margin-top:0}.dd-dragel .dd-handle{box-shadow:2px 4px 6px 0 rgba(0,0,0,.1)}
有想要跟笔者交流的,欢迎联系:3263138624@qq.com