jQuery简单的列表选择器

查看演示立即下载

插件描述：使用jQuery插件实现左右列表项的选择功能

更新时间：2017/10/26 上午11:42:01

更新说明：对列表选择功能进行优化

1. 新增多选功能在单选基础上进行变动，原有点击事件将会清除其他项的selected-item样式，现在将判断是否已有selected-item样式进行变动。添加时将所有包含selected-item样式的项进行列表选择。

2. 新增列表项可拖动且可进行拖动排序根据jQuery-ui列表排序sortable、拖动放置功能进行设计。

$('.item-box').sortable({
    placeholder: 'item-placeholder',
    connectWith: '.item-box',
    revert: true
}).droppable({
    accept: '.item',
    hoverClass: 'item-box-hover',
    drop: function(event, ui){
        setTimeout(function(){
                ui.draggable.removeClass('selected-item');
        }, 500);
    }
}).disableSelection();

初始化列表项选择事件

1	`function` `initItemEvent(){...}`

单击列表单击: 改变样式

var itemClickHandler = function(){
    $(this).parent('.item-box').find('.item').removeClass('selected-item');
    $(this).addClass('selected-item');
}

左边列表项移至右边

var leftMoveRight = function(){
    selectTitle.find('.list-body .right-box').append($(this).removeClass('selected-item'));
    initItemEvent();
}

左边列表项移至右边

var leftMoveRight = function(){
    selectTitle.find('.list-body .right-box').append($(this).removeClass('selected-item'));
    initItemEvent();
}

右边列表项移至左边

var rightMoveLeft = function(){
    selectTitle.find('.list-body .left-box').append($(this).removeClass('selected-item'));
    initItemEvent();
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery圆形气泡导航
下一个特效： jQuery顶部加载动画插件loadBar.js