一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

1、前言

使用技术：svg、jqueryUI 上一篇文章中，素材已经绘制出来了，接下来就要让素材跟着鼠标动起来，移动到相应的位置。经过这两天的学习，素材区域做一下调整。调整后：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <g class="draggableSvc"> 
                <circle cx="100" cy="50" r="5"  fill="blue" />
                <circle cx="100" cy="50" r="10" stroke="blue"  fill="none" />
            </g>
            <g class="draggableSvc" x="150" y="30"> 
                <rect x="150" y="30"  width="150" height="50" style="fill:none;stroke-width:1;stroke:rgb(0,0,0)"/>
                <text x="150" y="55" width="150" height="50">文本</text>
            </g>
 </svg>

这样，可以将同心圆做为一个整体，rect、text作为一个整体，同步移动。

2、记录鼠标的位置

声明两个全局变量，用来记录鼠标的位置。以拖拽文本所在容器为例。

    var currentMousePosX = 0;
    var currentMousePosY = 0;
    //获取鼠标坐标
    function mousePos(e) {
        if (e.pageX) {
            //IE9及以上支持pageX属性 相对文档
            currentMousePosX = e.pageX-150;//rect的x坐标
            currentMousePosY = e.pageY-230;//30 是rect y轴坐标，200目前没搞明白是啥玩意儿
        } 
    }

3、对需要拖动的容易绑定拖动事件

$( ".draggableSvc" ).draggable({
       appendTo: "body",
       start: function(event, ui){//当开始拖动时，触发这个方法
           console.log("开始拖动咯");
           console.log(ui.helper.context.innerHTML);
       },
       drag: function(event, ui){//拖动过程中，触发这个方法
            cosole.log("别拖啦别拖啦");
       },
       stop: function(event, ui){
            console.log("鼠标松开了");
       }
   });

4、动态创建一个svg容器

将div作为svg画布

var svgcontainer = document.getElementById("svgcontainer");
    //创建svg
    var svgns = "http://www.w3.org/2000/svg";
    var svger = document.createElementNS(svgns, "svg");
    svger.setAttribute("width","1500px");
    svger.setAttribute("height", "500px");
    svger.setAttribute("viewBox", "0 0 " + "1500" + " " + "500");
    svger.setAttribute("fill", "blue");
    svger.setAttribute("z-index", "0");
    svgcontainer.appendChild(svger);

5、将素材拖到画布放置

$( ".svgcontainer" ).droppable({
        activeClass: "ui-state-highlight",
        hoverClass: "drop-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {//event可以获取当前操作完成后的对象，ui操作当前完成前的对象  ui.draggable.context
            mousePos(event);
            var thisSvgEle = ui.draggable.context;//拖动的元素
            if(thisSvgEle.getAttribute ("class") != "draggableSvc"){//非素材区的svg只拖动不克隆
                thisSvgEle.setAttribute("transform","translate("+currentMousePosX+","+currentMousePosY+")");
                return;
            }
            var g = document.createElementNS(svgns, "g");
            g.setAttribute("class", "draggableG");
            g.setAttribute("transform","translate("+currentMousePosX+","+currentMousePosY+")");
            svger.appendChild(g);
            g.innerHTML = ui.draggable.context.innerHTML;
            $(".draggableG").draggable({ 
                containment:  $("#svgcontainer")
            });
   }})

6、总结和问题

以上问题就能让素材动起来，但问题依然存在问题1：素材只在起始和终点位置会显示，移动过程中看不到素材问题2：移动后的位置还需要再打磨打磨，位置会有偏差

SVG图形移动