OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

Sortable极小的可拖放排序分组库;支持AngularJS,React,Meteor


分享到
分类 大话编程   关键字 分享   发布 ourjs  1423465703467
注意 转载须保留原文链接,译文链接,作者译者等信息。  

Sortable


为现代浏览器和触摸设备拖放排序列表设计的简约JavaScript库。不依赖jQuery。支持Meteor,AngularJS,React,任意CSS库,如Bootstrap。

注* minify压缩后10K左右, Gzip后4K


在线示例: http://rubaxa.github.io/Sortable
项目地址: https://github.com/RubaXa/Sortable


特性


  • 支持触摸设备主流游览器(IE8+)
  • 可以在列表内和列表间拖动
  • 移动物品时支持CSS动画
  • 支持拖动手柄和可选择的文字(比voidberg的html5sortable更好)
  • 智能的自动滚屏
  • 使用内置的HTML5拖放API
  • 支持Meteor和AngularJS
  • 支持任何CSS库,例如Bootstrap
  • 简单的API
  • 不依赖jQuery(但支持)


使用



<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

var el = document.getElementById('items');
var sortable = Sortable.create(el);


你可以应用到任意元素,不仅仅是ul/li, 示例: http://jsbin.com/luxero/2/edit?html,js,output



社区评论 ( Beta版 )
  • #0 涂会央 1470906232623

    程序上的

  • #1 龙回宇 1470906264030

    阿三士大夫士大夫

  • #2 VK 1476167747906

    ie运行报错

  • #3 关圾那 1476873841745

    您好,怎么修改拖动时,有透明度的那个元素的样式?我在拖动时,这个元素的位置不太对

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 理解Node.js的事件循环(Event Loop)和线程池
  3. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  4. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  5. 什么是Viewport Meta(width详解)及在手机上的应用
  6. 专为控制打印设计的CSS样式
  7. io.js新支持的ECMAScript 6功能特性详解
  8. RedMonk的语言排名:JavaScript,Java保持领先;Go未进前20
  9. 在(Raspberry Pi)树莓派上安装NodeJS
  10. 使用NodeJS将XML解析成JSON及性能比较
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 大话编程
  1. JavaScript中的$$(*)代表什么和$选择器的由来
  2. javaScript 依赖管理
  3. JavaScript代码组织结构良好的5个特点[reuqire.js]
  4. 怎样用纯HTML和CSS更改默认的上传文件按钮样式
  5. 今天我去面试, 受打击了:你是学 .net 的吧?
  6. JavaScript中的继承,构造函数以及new关键字的作用
  7. fibjs 比 nodejs 快五倍
  8. 痛苦的Java程序员
  9. OneBody:开源的社交网络,邮件列表,词典和内容管理系统
  10. 我不懂Swift

 关键字 - 分享
  1. Kendo UI常用示例汇总(二十四)
  2. DevExpress ASP.NET示例资源最全分享!(三)
  3. 全国211高校数量最多省市排名:北京、上海、南京、武汉、西安最多,附高考难易地图
  4. 什么是马甲包?有什么作用?
  5. 图文详解!DevExpress XtraScheduler日程管理控件应用实例(1)-- 基本使用
  6. IE、Chrome、Firefox浏览器默认首页被改成360导航解决办法(删除daohang88.com)跳转
  7. DevExpress使用教程:手把手教你用官方汉化资源做汉化
  8. DevExpress使用教程:XtraGridControl动态添加右键菜单
  9. OnceAir自动考勤系统,无需手机签到打卡,轻松管理记录员工出勤信息
  10. 移动端开发框架哪个好?jQuery/Vue/AngularJS有哪些区别和优缺点?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号