Intercction objects fabric.js - html5-canvas

Question

I have two elements(rectangle, text), and when I move rentangle, the text move with the rentangle. enter image description here
After moving the rectangle, I want to select the text but I can not select it by clicking on it. How do I get the text is above the rectangle?
This is my code:
canvas.on("object:moving", function () {
//Objeto que se mueve
var obj = this.relatedTarget;
var type = obj.type;
var id = obj.id;
var top, left;
switch (type)
{
case 'rectangleElemento':
var elementos = buscarporElementoID(mapa.mapaElementos, id);
if (elementos.idTextoElemento != null)
{
var textoElemento = canvas.item(elementos.idTextoElemento);
top = obj.top + 20;
left = obj.left + 20;
textoElemento.setTop(top);
textoElemento.setLeft(left);
textoElemento.bringToFront();
canvas.bringForward(textoElemento);
//canvas.br
// obj.bringToBack();
//Pendiente que se active el texto por encima
}
break;
case 'textoElemento':
var elementos = buscarporElementoIDTexto(mapa.mapaElementos, id);
var bounds = canvas.item(elementos.idRectanguloElemento);
if (bounds.id == elementos.idRectanguloElemento) {
top = bounds.get('left');
left = bounds.get('top');
obj.setCoords();
if (!obj.isContainedWithinObject(bounds)) {
obj.setTop(goodtop);
obj.setLeft(goodleft);
// canvas.renderAll();
} else {
goodtop = obj.top;
goodleft = obj.left;
}
}
break;
}
});

Answer 1

Have you grouped the two objects to act as one or are you manipulating them separately?
I have done an older live exmple that loads an Image(t-shirt) and a logo(i-text) on it and we manipulate the text.
I have added textbox where we can update the i-text realtime and buttons to move the text up/down/left/right ,into the image element.
But first of all i create and group the two objects like this:
fabric.Image.fromURL(myImg, function(myImg) {
var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });
var text = new fabric.Text('the_text_sample\nand more', {
fontFamily: 'Arial',
fontSize:20,
});
text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
text.set("left",myImg.width*scaleFactor/2-text.width/2);
var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});
Live example : https://jsfiddle.net/tornado1979/zrazuhcq/
I hope that helps, good lick.