nativesortable, 使用本机拖放api提供可以排序的项 无 dependancies

分享于 

2分钟阅读

GitHub

  繁體 雙語
Use native drag and drop APIs to provide sortable items. No dependancies.
  • 源代码名称:nativesortable
  • 源代码网址:http://www.github.com/bgrins/nativesortable
  • nativesortable源代码文档
  • nativesortable源代码下载
  • Git URL:
    git://www.github.com/bgrins/nativesortable.git
    Git Clone代码到本地:
    git clone http://www.github.com/bgrins/nativesortable
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bgrins/nativesortable
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    实现HTML5拖放API以提供可以排序的项列表。

    无外部 dependancies。

    请参见演示:http://bgrins.github.com/nativesortable/

    用法

    
    var list = document.getElementById("list");
    
    
    nativesortable(list, {
    
    
     change: function(parent, elem) {
    
    
    //...
    
    
     },
    
    
     childClass:"sortable-child",
    
    
     draggingClass:"sortable-dragging",
    
    
     overClass:"sortable-over"
    
    
    });
    
    
    
    

    软件包管理

    
    bower install nativesortable
    
    
    - or -
    
    
    npm install nativesortable
    
    
    
    

    额外的CSS

    我还建议添加以下 CSS:

    
    [draggable] {
    
    
     -moz-user-select: none;
    
    
     -khtml-user-select: none;
    
    
     -webkit-user-select: none;
    
    
     user-select: none;
    
    
    }
    
    
    [draggable] * {
    
    
     -moz-user-drag: none;
    
    
     -khtml-user-drag: none;
    
    
     -webkit-user-drag: none;
    
    
     user-drag: none;
    
    
    }
    
    
    
    

    这保证了

    • 拖动时文本不突出显示
    • 本机可以拖动元素( 如 imga 标记)

    API  USE  DEP  NAT  Native  sort