Reset position in dragended event
<p>I'm trying to reset the position of a group if it's not dragged in the dropzone.</p>

<p>It works but when I try to drag it a second time, the group moves back to where it was dragged at first.</p>

<p>I think it's related to the origin.</p>

<p>Here's my code and a  <a href="http://jsfiddle.net/t67onzog/2/" rel="nofollow">fiddle</a></p>

<pre><code>   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 &gt; 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 + ")"; });
        }
    }
</code></pre>

<p>I have also tried this </p>

<pre><code>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]
                        };
                    })
</code></pre>