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