score:0

in your constructor do ...

constructor() {
  this.selected = this.selected.bind(this);
}

this means that this is always your class instance when this is referenced inside the selected method.

score:0

You can do .on("drag", () => this.dragging))

score:3

You can manually call the functions inside the callback with giving both global this and inner this as inputs.

start()
{
    var that = this;
    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", function(){
            return that.selected(this, that);
        })
        .on("mouseup", this.unselected));
}

dragging()
{
   console.log("dragging");
}

selected(innerThis, globalThis)
{
    if(d3.event.button == 0)
    {

        var box = d3.select(innerThis).node().getBBox();
        var Obj = d3.select(innerThis);
        var Obj2 = d3.select(innerThis).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", globalThis.dragging));//<--Here is the issue
       }
    }
}

OR

The following "not DRY" way. Make a variable that refers to this inside the start function then copy the mousedown events callback to the same scope with the variable that you've created earlier. This works but if you will use the same mousedown callback somewhere else you will need to repeat yourself.

start()
{
    var that = this;
    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", function(){
            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", that.dragging));//<--Here is the issue
           }
      })
     .on("mouseup", this.unselected));
}

dragging()
{
   console.log("dragging");
}

Related Query

More Query from same tag