dragended事件中的重置位置

我試圖重置組的位置，如果它沒有在拖放區中拖動。dragended事件中的重置位置

它可以工作，但是當我第二次嘗試拖動它時，組會先移回它被拖動的位置。

我認爲它與原點有關。

這裏是我的代碼和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] 
         }; 
        })

來源

2016-02-05 Marc

的問題是在你拖動處理程序的+=。我會用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 + ")" }); 
}

全碼：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

來源

2016-02-05 18:54:42 Mark

謝謝！這是有道理的，但它使左上角跳轉到鼠標。這裏是一個小提琴http://jsfiddle.net/t67onzog/3/ – Marc

有沒有一種方法來重置拖放功能中的d.x和d.y dragended？ – Marc

@Marc問題是它通過平移（這是左上角）來設置'g'的位置。你想通過'g'拖動鼠標在rect中的位置：http://jsfiddle.net/t67onzog/4/ – Mark

dragended事件中的重置位置

回答

相關問題