Question

我有一个svg元素。当我拖动元素时，应该在相同位置创建该大小的示例图像，并且应该开始拖动而不是真正的svg元素。这是JSFiddle

    function onDragDrop(dragHandler, dropHandler) {
        var drag = d3.behavior.drag();

    drag.on("drag", dragHandler)
    .on("dragend", dropHandler);
    return drag;
    }

    var g = d3.select("body").select("svg").append("g")
    .data([{ x: 50, y: 50 }]);

    g.append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","green")
    .attr("x", 20)
    .attr("y", 20)
    .call(onDragDrop(dragmove, dropHandler));

g.append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","red")
    .attr("x", 50)
    .attr("y", 50)
    .call(onDragDrop(dragmove, dropHandler));

    function dropHandler(d) {
       // alert('dropped');
    }

    function dragmove(d) {
        d3.select(this)
      .attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y);
    }

Answer 1

尝试代码：

Fiddle 此处

function dragmove(d) {
        d3.select("#sample")
       .attr("fill",d3.select(this).attr("fill"))
        .attr("opacity","0.7")
      .attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y);
    }

想要拖动样本图像而不是真实元素

1 个答案: