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>