I have a function which has been called on mousedown. Then I want to call another function however "this" is the mousedown object. So How do I call this.function?

```
start()
{
    d3.select(#svgArea)
        .append("rect")
        .attr("id", "newRect")
        .attr("x", 10)
        .attr("fill", "#FFFFFF")
        .attr("stroke", "#666666")
        .attr("y", 10)
        .attr("width", 250)
        .attr("height", 100)
        .on("mousedown", () => { d3.event.stopPropagation(); })
        .on("click", function() { d3.event.stopPropagation(); })
        .on("mousedown", this.selected)
        .on("mouseup", this.unselected));
}
selected()
{
    if(d3.event.button == 0)
    {

        var box = d3.select(this).node().getBBox();
        var Obj = d3.select(this);
        var Obj2 = d3.select(this).node().parentNode.parentNode;

        d3.select("#freedraw")
           .append("rect")
           .attr("id", "bottomRight")
           .attr("x", ((box.x + box.width)) + 3)
           .attr("y", ((box.y + box.height)) + 3)
           .attr("width", 6)
           .attr("height", 6)
           .attr("stroke", "#666666")
           .attr("fill-opacity", 0)
           .style("cursor","se-resize");

           d3.select("#bottomRight")
               .call(d3.drag()
                   .on("drag", this.dragging));//<--Here is the issue
       }
    }
}
dragging()
{
   console.log("dragging");
}

```

"this" in the context of the "selected" function is the object that the user mousedown on (which in this instance is a svg rect). Therefore in the area I have marked as "<--Here is the issue" it is using this.function, but all that is doing is selecting rect.function. 

how can i call my function "dragging" from here?