javascript --- Sortable一个拖拽的接口

最近项目里面要实现需要实现一个拖拽功能,自己实现很麻烦,就在网上找到了一个封装好的sortable函数,github(https://github.com/SortableJS/Sortable).

首先是依赖的引入:(也可以自己下载源代码导入,方式很多呢)

<body><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/><!-- Latest Sortable --><script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
</body>

导入了依赖文件后,调用起来也十分方便.

// 只需在需要的在<script>中输入以下代码即可实现拖拽,排序功能.
<body>
<div id='sortTrue' class="list-goup"><div class="list-group-item">foo</div><div class="list-group-item">bar</div><div class="list-group-item">baz</div>
</div>
<div id="sortFalse" class="list-group"><div class="list-group-item">qux</div><div class="list-group-item">quux</div>
</div>
<script>Sortable.create(‘sortTrue’，{group:' sorting',sort: true});Sortable.create(sortFalse, {group: "sorting",sort: false});
</div>
</body>

上述代码创建了2个list,可以把sortTrue内的元素拖拽到sortFalse里面(反之也成立),因为它们属于同一个分组(group:‘sorting’),区别在于,
sortTrue内的元素可以在组内拖动排序(srot:true).srotFalse内的元素不允许拖动排序(sort:false).

还有很多有趣的功能,具体参考官方github:https://github.com/SortableJS/Sortable. 文档说明

javascript --- Sortable一个拖拽的接口相关推荐

关于怎么在手机端实现一个拖拽的操作
手机端,肯定是监听touchstart,touchmove,touchend事件先来看看效果当拖拽时,拖拽到哪个节点下面,就把哪个节点添加到这个下面 <div>1111</div ...
JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
使用WebGL去实现一个拖拽式UI代码生成App
前言 UI(User Interface),即用户界面,是软件和用户之间进行交互和信息交换的媒介,实现信息的内部形式与人类可接受形式间的转换.UI开发一般需要经过UI设计.UI实现两个过程.UI设 ...
如何写一个拖拽日历组件（附源码）
作者简介 Kid 蚂蚁金服·数据体验技术团队本文会介绍如何写一个可拖拽日历组件,偏重点在于日历组件的功能挖掘以及对于开发过程的一些思考,编码部分会介绍核心部分的实现.代码在最后也会放出来给大家. 效 ...
javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...
原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑
前言提到元素拖拽,通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太过简陋, ...
C#:一个拖拽网页图片到本地存储的小工具
当年上学时候写的一个很简单的东西,拖动图片到程序中自动重命名保存到指定位置, 原图文地址:http://user.qzone.qq.com/652768664/blog/1363151915 usin ...
JavaScript实现鼠标拖拽登录框
拖拽的本质是登录框获得光标的偏移来调整自身的偏移. 拖拽发生时,光标相对盒子的坐标不会变化,相对于页面的坐标却在变化,二者的差值就是盒子需要的. 两个注意点: 1. 赋值给盒子的什么属性 outer. ...

javascript --- Sortable一个拖拽的接口

javascript --- Sortable一个拖拽的接口相关推荐

最新文章

热门文章