Edit in JSFiddle

var config = {
  view: document.querySelector('#chart'),
  width: 400,
  height: 400,
  roundPixels: true,
  resolution: window.devicePixelRatio,
  autoResize: true,
  transparent: true,
};
var app = new PIXI.Application(config);
var c1 = new PIXI.Container();

for (let i = 0; i < 20; i++) {
  var point = new PIXI.Graphics();
  point.beginFill(0xff0000, 1);
  point.drawCircle(0, 0, 6);
  point.x = 15 * i;
  point.y = 15 * i;
  point.buttonMode = true;
  point.interactive = true;
  point.mouseover = function() {
    alert("point mouseover" + i);
  }
  c1.addChild(point);
}

var m = new PIXI.Graphics();

var mask = m.drawRect(20, 20, 160, 160);

c1.mask = mask;
c1.interactive = true;
c1.hitArea = new PIXI.Rectangle(0, 0, c1.width, c1.height);
var moveEnable = false;
var ox, oy;
c1.mousedown = function(e) {
  moveEnable = true;
  ox = e.data.global.x;
  oy = e.data.global.y;
}
c1.mouseup = function() {
  moveEnable = false;
}
c1.mousemove = function(e) {
  if (moveEnable) {
    const {
      x,
      y
    } = e.data.global;
    var dx = x - ox;
    var dy = y - oy;
	  c1.x += dx;
    c1.y += dy;
    ox = x;
    oy =y;
  }
}

var t = new PIXI.Text("Text May be clicked", {
  fill: 0x7fc3ff,
  fontSize: 14,
});
t.x = 260;
t.y = 200;
t.buttonMode = true;
t.interactive = true;
t.click = function() {
  alert("text clicked")
}
app.stage.addChild(t);

app.stage.addChild(c1);

<ul>
<ol>1.I need the Container moveable </ol>
<ol>2.points inside the container is clickable</ol>
<ol>3.text outside the mask show be not affect by moving the container</ol>
<ol>4.points outside the mask should be not clickable</ol>
</ul>
<canvas id="chart">

</canvas>
<script src="https://cdn.bootcss.com/pixi.js/4.6.2/pixi.min.js"></script>

#chart {
  border: 1px solid #ddd;
  margin: 20px auto;
}