您好,欢迎来到易妖游戏网。
搜索
您的当前位置:首页jQueryUI写一个调整分类的拖放效果实现代码_jquery

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

来源:易妖游戏网


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


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

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

代码

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



Drag & Drop Test

src="https://readself.com/static/js/jquery.min.js?v=52337">
src="https://readself.com/static/js/jquery-ui.min.js?v=ab482">
href="https://readself.com/static/css/smoothness/jquery-ui.css?v=af3ef" />




  • Fruits



  • Apple

  • Pear

  • Banana



  • Vegetables



  • Tomato

  • Potato

  • Cucumber



  • Meet



  • Beaf

  • Pork

  • Chicken




  • $('#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();
    });

    Copyright © 2019- vipyiyao.com 版权所有 湘ICP备2023022495号-8

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务