第一次控制JQuery对象跳转的SVG可拖动元素

基础概念

JQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

SVG (Scalable Vector Graphics) 是一种基于 XML 的图像格式，用于描述二维矢量图形。SVG 图形可以无损地缩放到任何大小，并且可以在浏览器中直接嵌入和交互。

可拖动元素 指的是用户可以通过鼠标或触摸屏等设备在屏幕上移动的元素。

类型

基于 JQuery UI 的拖动功能: JQuery UI 提供了一套完整的拖放 API。
自定义拖动功能: 使用 JQuery 和原生 JavaScript 实现拖动效果。

应用场景

数据可视化工具（如仪表盘、图表）
交互式地图
游戏和娱乐应用
教育和培训材料

示例代码

以下是一个简单的示例，展示如何使用 JQuery 和 SVG 创建一个可拖动的圆形元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draggable SVG Circle</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #draggable {
            cursor: move;
        }
    </style>
</head>
<body>
    <svg width="500" height="500">
        <circle id="draggable" cx="50" cy="50" r="20" fill="blue"></circle>
    </svg>

    <script>
        $(document).ready(function() {
            var svg = document.querySelector('svg');
            var circle = document.getElementById('draggable');

            var startX, startY, initialX, initialY;

            circle.addEventListener('mousedown', function(event) {
                event.preventDefault();
                initialX = event.clientX - parseFloat(circle.getAttribute('cx'));
                initialY = event.clientY - parseFloat(circle.getAttribute('cy'));
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            });

            function onMouseMove(event) {
                circle.setAttribute('cx', event.clientX - initialX);
                circle.setAttribute('cy', event.clientY - initialY);
            }

            function onMouseUp() {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            }
        });
    </script>
</body>
</html>