SVGElement Drag & Drop

最新推荐文章于 2024-08-23 08:18:43 发布

原创最新推荐文章于 2024-08-23 08:18:43 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #SVG

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现SVG图形元素拖拽的方法。通过监听mousedown、mousemove和mouseup事件，实现了SVG圆形元素的位置调整，并实时更新其坐标属性。

<html>
<script>
var dx, dy;
var x, y;
var actived = null;
function mouseDownListener(e){
    if(actived.setCapture){
        actived.setCapture();
    }
    else{
        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    }
    var canvas = document.getElementById('objCanvas');
    canvas.addEventListener("mousemove", mouseMoveListener, false);
    canvas.addEventListener("mouseup", mouseUpListener, false);
    x = e.offsetX, y = e.offsetY;
    dx = x-parseInt(actived.getAttribute('cx'), 10);
    dy = y-parseInt(actived.getAttribute('cy'), 10);
    console.log('('+x+','+y+'), ('+dx+','+dy+')');
    //console.log('mouse down | X,Y: ('+e.x+', '+e.y+') | client X,Y: (' + e.clientX + ', ' + e.clientY + ') offset X,Y: (' + e.offsetX + ', ' + e.offsetY + ')');
    //e.cancelBubble = true;
}

function mouseMoveListener(e){
    //actived.setAttribute("transform", "translate("+dx+", "+dy+")");
    actived.setAttribute("cx", e.offsetX-dx);
    actived.setAttribute("cy", e.offsetY-dy);
    //console.log('mouse moving: ('+e.clientX+', '+e.clientY+')('+e.x+', '+dy+')');
}

function mouseUpListener(e){
    dragging = false;
    console.log('mouse up');
    if(actived.releaseCapture){
        actived.releaseCapture();
    }
    else{
        window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    //actived.setAttribute('cx', x);
    //actived.setAttribute('cy', y);
    //actived.setAttribute('transform', 'translate(0, 0)');


    var canvas = document.getElementById('objCanvas');
    canvas.removeEventListener('mousemove', mouseMoveListener);
    canvas.removeEventListener('mouseup', mouseUpListener);
    //canvas.onmousemove  = null;
    //canvas.onmouseup = null;

}

document.onreadystatechange = function(e){
    if(document.readyState=='complete'){
        actived = document.getElementById('objCircle');
        //actived.onmousedown = mouseDownListener;
        actived.addEventListener("mousedown", mouseDownListener, false);
    }
}
</script>
<body>
<svg id="objCanvas" width="640" height="480" style="background-color:#eee" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle id="objCircle" cx="100" cy="100" r="5" stroke="green"
stroke-width="2" fill="white"/>

</svg>
</body>
</html>