首页 > web前端 > js教程 > jQueryUI写一个调整分类的拖放效果实现代码_jquery

jQueryUI写一个调整分类的拖放效果实现代码_jquery

WBOY
发布: 2016-05-16 17:54:00
原创
1070 人浏览过

所以还是自己动手丰衣足食,还是坚持简单就是美的代码风格。


试试在iframe里嵌入一个测试页面,你可以使用鼠标拖动项目,调整分类:

当然,这并不是我要的最终效果,只能说它已经实现了一个我想要的拖放效果。我要求的在这个基础上,还要增加自动排序,位置变更后恢复之前元素bind的jQuery事件等。

代码

代码如下,如要复制,请先查看纯文本版本!

复制代码 代码如下:




Drag & Drop Test



href="https://readself.com/static/css/smoothness/jquery-ui.css?v=af3ef" />




<script> <BR>$('#menu li').disableSelection(); <BR>$('li', $('#menu ul')).draggable({revert: 'invalid', helper: 'clone'}); <BR>$('#menu .folder').droppable({ <BR>hoverClass: "menu_hover", <BR>drop: function(event, ui){ <BR>if(ui.draggable.parents('.folder').get(0) == $(this).get(0)) <BR>return ; <BR>$('ul', this).append(ui.draggable.clone()); <BR>ui.draggable.remove(); <BR>$('li', this).draggable({remove: 'invalid', helper: 'clone'}); <BR>} <BR>}); <BR>$('#menu .folder p').click(function(){ <BR>$(this).next().toggle(); <BR>}); <BR></script>
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板