當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript --- Sortable一个拖拽的接口
生活随笔
收集整理的這篇文章主要介紹了
javascript --- Sortable一个拖拽的接口
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近項目里面要實現(xiàn)需要實現(xiàn)一個拖拽功能,自己實現(xiàn)很麻煩,就在網(wǎng)上找到了一個封裝好的sortable函數(shù),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>導入了依賴文件后,調(diào)用起來也十分方便.
// 只需在需要的在<script>中輸入以下代碼即可實現(xiàn)拖拽,排序功能. <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>上述代碼創(chuàng)建了2個list,可以把sortTrue內(nèi)的元素拖拽到sortFalse里面(反之也成立),因為它們屬于同一個分組(group:‘sorting’),區(qū)別在于,
sortTrue內(nèi)的元素可以在組內(nèi)拖動排序(srot:true).srotFalse內(nèi)的元素不允許拖動排序(sort:false).
還有很多有趣的功能,具體參考官方github:https://github.com/SortableJS/Sortable. 文檔說明
總結(jié)
以上是生活随笔為你收集整理的javascript --- Sortable一个拖拽的接口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 玩客云pc端_玩客云下载-玩客云电脑版下
- 下一篇： tar.bz2解压报错误 Error i