鍍金池/ 問答/C  HTML/ 使用jTopo繪制的拓撲圖在移動端如何實現(xiàn)拖動、縮放?

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

使用jTopo繪制的拓撲圖在PC端上可以用鼠標進行拖動和縮放操作,但在移動端卻無法用手指進行拖動和縮放操作,請教各位大大,有做夠過類似案例嗎? 指點一二平板模式下,無法拖拽,源碼沒看懂怎么修改

回答
編輯回答
菊外人
// 1、定義這兩個函數(shù)
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、執(zhí)行 findElm(selectorElement) 即可將移動端的touch
findElm(selectorElement); 
    
2018年4月28日 05:25