test.html

<!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>
        <div>
            <ul id="items">
                <li class="li">item 1</li>
                <li class="li">item 2</li>
                <li class="li">item 3</li>
              </ul>
        </div>

           <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>