Put element in foreground - konvajs

Question

I would like to know how to put the box in foreground and the image in background. I try moveToTop(), setZIndex() on box but when i drag it the image go to foreground.
one(){
var stage = new Konva.Stage({
container: 'container',
width: 400, height: 250
});
var layer = new Konva.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Konva.Image({
image: imageObj,
});
// yoda.setZIndex(2);
layer.add(yoda);
};
imageObj.src = '/assets/images/vert.png';
this.two(stage, layer)
}
two(stage: Konva.Stage, layer) {
var box = new Konva.Rect({
x: 20, y: 20,
width: 100, height: 50,
fill: '#00D2FF', stroke: 'black',
strokeWidth: 4,
draggable: true
});
// box.setZIndex(1); box.moveToTop()
layer.add(box);
stage.add(layer)
}

Answer 1

I took your code and made a plain JS working snippet so that I could experiment. See below.
You were very close with your line
// yoda.setZIndex(2);
layer.add(yoda);
except that the z-index affecting attributes work on the position of the shape in the layer. Therefore the shape MUST BE IN A LAYER for the call to work. See my code where I use
layer.add(yoda);
yoda.moveToBottom()
meaning the layer-affecting call happens AFTER adding yoda to the layer.
You may also wish to consider using multiple layers if, say, you will have many shapes that need to be on one or another layer.
var stage = new Konva.Stage({
container: 'container',
width: 400, height: 250
});
var layer = new Konva.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Konva.Image({
width: 100, height: 100,
image: imageObj,
});
layer.add(yoda);
yoda.moveToBottom(); // <<<< must add to the layer BEFORE setting the z-order.
layer.draw();
};
imageObj.src = 'https://i.stack.imgur.com/WxBvk.png';
two(stage, layer)
function two(stage, layer) {
var box = new Konva.Rect({
x: 20, y: 20,
width: 100, height: 50,
fill: '#00D2FF', stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box);
}
stage.add(layer)
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>