jquery使用列表标签实现的可拖拽listbox

前两天遇到朋友提到listbox.

所以心血来潮，花了一下午时间自己使用jquery,利用列表标签实现了一个listbox.

代码还未来得及优化，但功能已实现并可以使用，在此希望与大家分享探讨。

如有不足之处，诚恳接受各位的建议和意见，欢迎评论。

 

源码demo下载：jquery-listbox-2.2

效果图:

一.设计思路：

 1.标签的使用：既然是列表，那无疑选择使用列表标签（ul,ol）等比较方法，考虑到，如果需要数字的修饰，最终采用ol标签

 2.jquery自定义函数：相信网上已有很多教程，在此不赘述。有一点需要提一下，最开始使用的是(function ($) {}(jQuery));这种方式，但在ie中虽然能执行，然会报错。后来换成

(function ($) {}($));具体什么原因，未详查。

3.创建内容项：其实就是根据传进来的数据生成li标签并加入到ol标签中。

4.上移，下移，删除 功能：要实现这个，重点在于选中项，所以我用了一个全局变量 onElement 来标识被选中的项。上移的时候，将此项插入到他的prev()项前面。下移同理，使用next()，删除则使用remove()

5.拖拽：本来jquery ui里面有拖拽功能的实现，但如果仅为了推拽这个功能引入jquery ui这个库，就有点多余了，所以在网上找了一个很小的推拽插件：jquery drag and drop。

6.撤销删除：类似回收站，设置一个全局变量，数组。每次删除时，将被删除的项放入数组中的第一项。在撤销时，判断如果数组中有内容，则将第一项加入列表中，并再次进行拖拽的绑定。（注：在撤销删除后有一个BUG，无法将其他项推拽到第一位，但第一位的项能被推拽到其他位置。如果没法接受此bug,可以考虑去掉“撤销删除”功能或“推拽”功能。）

7.键盘事件：考虑到操作较多，绑定键盘时候的时候，要求传入操作标识数组，而不是每一个操作都进行单独的方法。

/*绑定键盘事件*/
    $.fn.bindKeyboardEvent = function (keyArray) {
        if (keyArray == null) return
        var isMoveUp = $.inArray("moveup", keyArray) > -1;
        var isMoveDown = $.inArray("movedown", keyArray) > -1;
        var isSelectedUp = $.inArray("selectedup", keyArray) > -1;
        var isSelectedDown = $.inArray("selecteddown", keyArray) > -1;
        var isRevoke = $.inArray("revoke", keyArray) > -1;
        var isDelete = $.inArray("delete", keyArray) > -1;
        var isCtrl = false;
        var listbox = this;
        $(document).keydown(function (e) {
            if (e.which === 17)
                isCtrl = true;
            var keycode = e.which;
            switch (keycode) {
                case 90: if (isCtrl && isRevoke) { runRevokeElement(listbox) }; break;
                case 38: if (isCtrl && isMoveUp) { runUp(true); } if (isSelectedUp && !isCtrl) { runUp(false); }; break;
                case 40: if (isCtrl && isMoveDown) { runDown(true); } if (isSelectedDown && !isCtrl) { runDown(false); }; break;
                case 46: if (isDelete) { runDelete(); }; break;
            }

        }).keyup(function (e) {
            if (e.which === 17)
                isCtrl = false;
        });
    }

8.css样式：可以在css文件中自定义样式。

以上为所有设计思路，其实思路挺简单，只是做起来花费一些时间而已。

二.测试浏览器

ie：7 8 9 10 ；firefox 25.0.1 可用。其他浏览器未测试。

三.实现和使用方式

实现和使用方式 在源码中有详细的注释，有什么疑问可以参见源码。

作者：jiangteng

注：转载时请注明出处和作者。