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

所以还是自己动手丰衣足食，还是坚持简单就是美的代码风格。试试在iframe里嵌入一个测试页面，你可以使用鼠标拖动项目，调整分类：当然，这并不是我要的最终效果，只能说它已经实现了一个我想要的拖放效果。我要求的在这个基础上，还要增加自动排序，位置变更后恢复之前元素bind的jQuery事件等。代码代码如下，如要复制，请先查看纯文本版本！复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Drag & Drop Test</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://readself.com/static/js/jquery.min.js?v=52337"></script> <script type="text/javascript" src="https://readself.com/static/js/jquery-ui.min.js?v=ab482"></script> <link rel="stylesheet" type="text/css" href="https://readself.com/static/css/smoothness/jquery-ui.css?v=af3ef" /> <style type="text/css"> li {cursor: pointer} .menu_hover {background-color: #d0d0d0;} #menu p{margin: 5px 0 5px 0;} </style> <body> <ul id="menu"> <li class="folder"> <p>Fruits</p> <ul> <li>Apple</li> <li>Pear</li> <li>Banana</li> </ul> </li> <li class="folder"><p>Vegetables</p> <ul> <li>Tomato</li> <li>Potato</li> <li>Cucumber</li> </ul> </li> <li class="folder"><p>Meet</p> <ul> <li>Beaf</li> <li>Pork</li> <li>Chicken</li> </ul> </li> </ul> <script> $('#menu li').disableSelection(); $('li', $('#menu ul')).draggable({revert: 'invalid', helper: 'clone'}); $('#menu .folder').droppable({ hoverClass: "menu_hover", drop: function(event, ui){ if(ui.draggable.parents('.folder').get(0) == $(this).get(0)) return ; $('ul', this).append(ui.draggable.clone()); ui.draggable.remove(); $('li', this).draggable({remove: 'invalid', helper: 'clone'}); } }); $('#menu .folder p').click(function(){ $(this).next().toggle(); }); </script>

　　推荐阅读

　　一个基于jQuery的树型插件(OrangeTree)使用介绍

OrangeTree 下载地址：OrangeTree 首先大家先看下演示吧！首先声明本人美术功底比较差！这个样式大家就将就一下吧！我将这个无限级树型插件命名为桔子树，它主要就分为3个级别的节点：首级菜单，就是树上的一级菜>>>详细阅读

本文标题：jQueryUI写一个调整分类的拖放效果实现代码

地址：http://www.17bianji.com/kaifa2/JS/23424.html

1/2 1