KineticJS Layer Index When Dragging

So my problem seems to be that a draggable object always is drawn over other objects. Check out my fiddle. and my code:

Solution 1:

http://jsfiddle.net/nYHrg/3/

So the problem is that kineticjs (4.3.0) added a new 'drag' layer to improve dragging performance. Any time that you drag an object, it is put in the drag layer, and when you stop dragging, it is put back in it's own layer. This does not preserve your original z-index. Anytime you create a new object and you want to override this functionality you will have to set one of the attributes of the object as:

 "dragOnTop: false"

see jsfiddle for exact implementation.