逻辑：

按下时获取元素坐标和手指坐标
move时获取手指坐标
用 move的手指 - start时的手指坐标 = 手指移动距离
start时元素坐标 + 手指移动距离 = 元素的当前距离

触摸事件拖拽：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>触摸拖拽</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 200px;
            height: 361px;
            cursor: pointer;
            position: absolute;
            top: 0px;
            left: 0px;
            background: #787878;
        }
    </style>
</head>

<body>
    <ul id="ul1">
        拖拽
    </ul>
    <script>
        var ul1 = document.getElementById('ul1')
        var startPoint = 0  // 按下时的手指坐标
        var startEl = 0   // 按下时的元素坐标
        ul1.addEventListener('touchstart', function (e) {
            startPoint = e.changedTouches[0].pageX
            startEl = parseFloat(getComputedStyle(ul1, null).left)
        })
        ul1.addEventListener('touchmove', function (e) {
            var nowPoint = e.changedTouches[0].pageX
            var pointDis = nowPoint - startPoint
            ul1.style.left = pointDis + startEl + 'px'
        })
    </script>
</body>

</html>

鼠标事件拖拽：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标拖拽</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 200px;
            height: 361px;
            cursor: pointer;
            position: absolute;
            top: 0px;
            left: 0px;
            background: #787878;
        }
    </style>
    <script>
        window.onload = function () {
            var oUl = document.getElementById('ul1');
            var disX = 0;
            var offsetLeft = 0 //元素坐标
            oUl.onmousedown = function (ev) {
                disX = ev.pageX
                offsetLeft = oUl.offsetLeft // parseFloat(getComputedStyle(oUl,null).left)
                oUl.onmousemove = function (ev) {
                    oUl.style.left = ev.pageX - disX + offsetLeft + 'px'
                };
                // 鼠标抬起
                oUl.onmouseup = function (ev) {
                    // 取消事件监听
                    oUl.onmousemove = null;
                    oUl.onmouseup = null;
                };
                //防止文字选中
                return false;
            };
        };
    </script>
</head>

<body>

    <ul id="ul1">
        拖拽
    </ul>

</body>

</html>

拖拽原理实现

逻辑：

触摸事件拖拽：

鼠标事件拖拽：