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

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

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

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

代码

代码如下，如要复制，请先查看纯文本版本！

复制代码 代码如下:

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

• 
  

  Fruits

  
  
  
  
  • Apple
  
  
  • Pear
  
  
  • Banana
  
  
  
  



• Vegetables

  
  
  
  
  • Tomato
  
  
  • Potato
  
  
  • Cucumber
  
  
  
  



• Meet

  
  
  
  
  • Beaf
  
  
  • Pork
  
  
  • Chicken
  
  
  
  

<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>