SortableJS

功能強大的JavaScript 拖拽庫,官網http://www.sortablejs.com/index.html，配置項參考http://www.sortablejs.com/options.html

頁面實現demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <style type="text/css">
        .li{
            color: red;
            font-weight: bold;
        }
    </style>
    
    <body>
          <ul id="items">
            <li class="li">item 1</li>
            <li class="li">item 2</li>
            <li class="li">item 3</li>
          </ul>
           <ul id="item">
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
          </ul>
    </body>
    <script type="text/javascript">
        var el1 = document.getElementById('items');
        var el2 = document.getElementById('item');
          new Sortable(el1, {
            group: 'items', // set both lists to same group
            animation: 150,
             // 開始拖拽的時候
            onStart: function (/**Event*/evt) {
            console.log(evt)
            evt.oldIndex;  // element index within parent
        },
        });
        
        new Sortable(el2, {
            group: 'items',
            animation: 150
        });
        
    </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ext列表展現--普通排序sortable--全局排序remoteSort(EXTJS 全局排序問題) vue插件實現表格拖拽 sortable 遇見的坑 vue+element 使用sortable實現表格拖拽 ElementUI 基於vue+sortable.js實現表格行拖拽 vue拖拽--實現表格行和列的拖拽 [sortable.js]---元素拖拽【vuedraggable】 jqueryui sortable拖拽后保存位置 ng-sortable拖拽拉取效果 uni-app vue使用Sortable.js拖拽效果 vuejs2.0使用Sortable.js實現的拖拽功能實現Bootstrap表格拖拽