Question

我正在尝试重置群组的位置，如果它没有被拖放到dropzone中。

它有效但当我再次尝试拖动时，该组会先移回到最初拖动的位置。

我认为这与起源有关。

这是我的代码和fiddle

   function init(){
       var drag = d3.behavior.drag()
                    .origin(function (d) { return d; })
                    .on("dragstart", dragstarted)
                    .on("drag", dragged)
                    .on("dragend", dragended);

       entities = svg.selectAll("g")
                     .data([{ x: 750, y: 100 }])
                     .enter()
                     .append("g")
                     .attr("class","entity-group")
                     .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
                     .attr("initial-x", function (d) { return d.x })
                     .attr("initial-y", function (d) { return d.y })
                     .call(drag);
   }

   function dragstarted(d) {
        d3.event.sourceEvent.stopPropagation();
        d3.select(this)
          .classed("dragging", true);
    }

    function dragged(d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;

        d3.select(this)
           .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")" });
    }

    function dragended(d) {
        d3.select(this)
          .classed("dragging", false);

        if (d.x > dropzoneWidth) {
            var entity = d3.select(this);
            var x = entity.attr("initial-x");
            var y = entity.attr("initial-y");

            entity.attr("transform", function (d) { return "translate(" + x + "," + y + ")"; });
        }
    }

我也试过这个

d3.behavior.drag()
           .origin(function (d) {
                   var t = d3.select(this);
                   return {
                            x: d3.transform(t.attr("transform")).translate[0],
                            y: d3.transform(t.attr("transform")).translate[1]
                        };
                    })

Answer 1

问题在于拖动处理程序中的+=。我对父容器使用d3.mouse：

function dragged(d) {
    var coors = d3.mouse(this.parentNode);
    d.x = coors[0];
    d.y = coors[1];

    d3.select(this)
       .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")" });
}

完整代码：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <script>
    var dropzoneWidth = 200;
    
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500)
    
    
      function init(){
       var drag = d3.behavior.drag()
                    .origin(function (d) { return d; })
                    .on("dragstart", dragstarted)
                    .on("drag", dragged)
                    .on("dragend", dragended);

       entities = svg.selectAll("g")
                          .data([{ x: 100, y: 100 }])
                          .enter()
                          .append("g")
                          .attr("class","entity-group")
                          .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
                          .attr("initial-x", function (d) { return d.x })
                          .attr("initial-y", function (d) { return d.y })
                          .call(drag);
                          
                        entities
                          .append('circle')
                          .style('fill', 'black')
                          .attr('r', 15)
   }

   function dragstarted(d) {
        d3.event.sourceEvent.stopPropagation();
        d3.select(this)
          .classed("dragging", true);
    }

    function dragged(d) {
        var coors = d3.mouse(this.parentNode);
        d.x = coors[0];
        d.y = coors[1];

        d3.select(this)
           .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")" });
    }

    function dragended(d) {
        d3.select(this)
          .classed("dragging", false);

        if (d.x > dropzoneWidth) {
            var entity = d3.select(this);
            var x = entity.attr("initial-x");
            var y = entity.attr("initial-y");

            entity.attr("transform", function (d) { return "translate(" + x + "," + y + ")"; });
        }
    }
      
      init();
      
    </script>
  </body>

</html>

＆＃13;

在dragended事件中重置位置

1 个答案: