亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用jTopo繪制的拓撲圖在移動端如何實現拖動、縮放?

使用jTopo繪制的拓撲圖在移動端如何實現拖動、縮放?

慕桂英546537 2019-02-14 14:12:34
使用jTopo繪制的拓撲圖在PC端上可以用鼠標進行拖動和縮放操作,但在移動端卻無法用手指進行拖動和縮放操作,請教各位大大,有做夠過類似案例嗎? 指點一
查看完整描述

1 回答

?
森欄

TA貢獻1810條經驗 獲得超5個贊

// 1、定義這兩個函數

function touchEventToMouseEvent(event, eventType) {

        if (!event.originalEvent || !event.originalEvent.targetTouches || event.originalEvent.targetTouches.length != 1)

            return false;

        var te = event.originalEvent.targetTouches[0];

        var clientX = te.clientX, clientY = te.clientY, screenX = te.screenX, screenY = te.screenY;


        var simEvent = new MouseEvent(eventType, {

            clientX: clientX,

            clientY: clientY,

            screenX: screenX,

            screenY: screenY,

            button: 0,

            buttons: 0

        });

        return simEvent;

    }

    

function findElm(targetElement) {

        targetElement.on('touchstart', function (e) {

            console.log('touchstart');

            console.log(e);

            var simEvent = touchEventToMouseEvent(e, 'mousedown');

            if (simEvent != null) {

                $(this)[0].dispatchEvent(simEvent);

            }

        });


        targetElement.on('touchmove', function (e) {

            e.preventDefault();

            console.log('touchmove');

            var simEvent = touchEventToMouseEvent(e, 'mousemove');

            if (simEvent != null) {

                $(this)[0].dispatchEvent(simEvent);

            }

        });


        targetElement.on('touchend', function (e) {

            console.log('touchend');

            console.log(e);

            var simEvent = touchEventToMouseEvent(e, 'mouseup');

            if (simEvent != null) {

                $(this)[0].dispatchEvent(simEvent);

            }

        });

}

   

// 2、執行 findElm(selectorElement) 即可將移動端的touch

findElm(selectorElement); 

    


查看完整回答
反對 回復 2019-02-20
  • 1 回答
  • 0 關注
  • 1317 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號