移动端拖动元素

339 阅读1分钟
div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

<div></div>

var div = document.querySelector('div');
        var startX = 0;
        var startY = 0;
        var x = y = 0;
        div.addEventListener('touchstart', function(event) {
            startX = event.targetTouches[0].pageX;
            startY = event.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;

        });
        div.addEventListener('touchmove', function(event) {
            var moveX = event.targetTouches[0].pageX - startX;
            var moveY = event.targetTouches[0].pageY - startY;
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            event.preventDefault();
        })
        //不要用e代替event,有些设备会报错