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

最新推荐文章于 2023-04-11 20:20:11 发布

栗子好好吃

最新推荐文章于 2023-04-11 20:20:11 发布

阅读量500

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

113 篇文章 1 订阅

订阅专栏

最近项目里面要实现需要实现一个拖拽功能,自己实现很麻烦,就在网上找到了一个封装好的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. 文档说明

栗子好好吃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript --- > Sortable一个拖拽的接口

最近项目里面要实现需要实现一个拖拽功能,自己实现很麻烦,就在网上找到了一个封装好的sortable函数,github(https://github.com/SortableJS/Sortable).首先是依赖的引入:(也可以自己下载源代码导入,方式很多呢)<body>  <l...
复制链接

扫一扫