OK I had a similar problem when moving images but using animations not drag and drop.

The way I resolved it was to have hidden canvases around the main canvas which the image could be moved into and switching of Auto Scroll bars.

Thus having a fixed area on the screen which the image can move round and into.

Enabling the background to stay static.

Well a brief explanation but hopefully enough for a solution.

that's excellent, thanks. I'll dig into it shortly to see where I have gone wrong.

The clue is in the style name 'borderSkin', this skin is primarily for borders, not backgrounds.

Some info on whats going on:
When a Container has ScrollBars added to it, it creates a new Sprite inside itself named contentPane, to hold the children, removes the children from itself, and adds the to the contentPane. It then scrolls the view by using a scrollRect on the contentPane.

The contentPane has some of the styles set on the Canvas applied to it (namely background stuff (backgroundDisabledColor, backgroundColor, backgroundAlpha, backgroundImage, background)), and this sits on top of the border which remains at index 0 within the Canvas's rawChildren.


Easiest hack:
Set the backgroundAlpha style to 0. The exact same thing will be happening, but because the background alpha is 0, u won't see it and therefore you will see your 'border' below it.

A Canvas handles this by checking whether the style 'backgroundImage' has been set, and it it has, it doesn't give the contentPane an opaque background (so it doesn't cover the image).

So another alternative would be to use the built in style 'backgroundImage' to assign the image, and use that in your skin, instead of adding another style to do the same thing (i.e. your 'bgImage').