adobe-webplatform / Snap.svg

The JavaScript library for modern SVG graphics.
http://snapsvg.io
Apache License 2.0
13.91k stars 1.15k forks source link

Element.drag() is working well on the PC, but not working well on the pad. #672

Closed qiuliang1108 closed 1 year ago

qiuliang1108 commented 1 year ago

My pad is a Lenovo brand(Lenovo TB-J716F). My browser is chrome(Chrome 88.0.4324.181).

qiuliang1108 commented 1 year ago

let c1 = Snap('#svg') .paper.rect(0, 0, boxHeight, boxWidth) .attr({ id: item.uuid, fill: 'rgb(220, 189, 149)', stroke: 'rgba(102, 102, 102, 1)', strokeLinecap: 'square', strokeWidth: 1, class: box-${item.sort} })

let c2 = Snap('#svg').paper.text(boxHeight / 2, boxWidth / 2, item.sort)

Snap('#svg') .paper.g(c1, c2) .drag() .click(function () { vm.dealWithClickBox(item.uuid, this) })

qiuliang1108 commented 1 year ago

customDrag(ele) { let move = function (dx, dy, x, y) { let clientX, clientY if (typeof dx == 'object' && dx.type == 'touchmove') { clientX = dx.changedTouches[0].clientX clientY = dx.changedTouches[0].clientY dx = clientX - this.data('ox') dy = clientY - this.data('oy') } this.attr({ transform: this.data('origTransform') + (this.data('origTransform') ? 'T' : 't') + [dx, dy] }) }

        let start = function (x, y, ev) {
            // debugger
            if (typeof x == 'object' && x.type == 'touchstart') {
                x.preventDefault()
                this.data('ox', x.changedTouches[0].clientX)
                this.data('oy', x.changedTouches[0].clientY)
            }
            this.data('origTransform', this.transform().local)
        }

        let stop = function () {}

        // pad上拖拽
        ele.touchstart( start );
        ele.touchmove( move );
        ele.touchend( stop );

        // 电脑上拖拽
        ele.drag(move, start, stop)
    },