Dragging Custom Node in JavaFX - layout

Question

I cannot get it working although I am very close to an acceptable solution.
I can drag the Dock if it is only a rectangle. But if I add a node (e.g. an image) to this dock I am not able to get a working solution.
Here is my code:
public class Dock extends CustomNode {
// initialize this with an 64x64 image of your choice
// via ImageView { image: Image {..}}
public var content: Node[];
public var width = 64;
public var height = 64;
public var xOffset: Number = 0;
public var yOffset: Number = 0;
var imgX: Number = 0;
var imgY: Number = 0;
var distX: Number;
var distY: Number;
public var rasterX = function (n: Number): Number {
var MAX = 4 * 64;
if (n < 0) {
return 0
} else if (n > MAX) {
return MAX
} else
return n
}
public var rasterY = rasterX;
override protected function create(): Node {
Group {
// if we place the translate here then the whole dock will flicker
//translateX: bind imgX;
//translateY: bind imgY;
content: [
Rectangle {
// ... and here 'content' logically won't be dragged
translateX: bind imgX;
translateY: bind imgY;
height: bind height
width: bind width
fill: Color.LIGHTGRAY
strokeWidth: 4
stroke: Color.BLACK
}, content]
onMousePressed: function (e: MouseEvent): Void {
xOffset = e.x;
yOffset = e.y;
// Calculate the distance of the mouse point from the image
// top-left corner which will always come out as positive value
distX = e.x - imgX;
distY = e.y - imgY;
}
onMouseDragged: function (e: MouseEvent): Void {
// Find out the new image postion by subtracting the distance
// part from the mouse point.
imgX = rasterX(e.x - distX);
imgY = rasterY(e.y - distY);
}
}
}
I tried blocksMouse:true on different nodes, tried it with mouseReleased etc but I coudn't get properly working solution. Do you have any pointers/tips on how this it done correctly?

Answer 1

Finally sorted it out from this example, but you don't need to follow the tutorial (I got an exception!?) - simply download the sources or use:
public class Dock extends CustomNode {
public var content: Node[];
public var width = 64;
public var height = 64;
public var xOffset: Number = 0;
public var yOffset: Number = 0;
public var rasterX = function (n: Number): Number {
// the following code is for the 'grid' which can be avoided of course
var n2 = n - n mod 64;
var MAX = 4 * 64;
if (n2 < 0) {
return 0
} else if (n2 > MAX) {
return MAX
} else
return n2
}
public var rasterY = rasterX;
override protected function create(): Node {
var node: Group;
node = Group {
content: [
Rectangle {
height: bind height
width: bind width
arcHeight: 10
arcWidth: 10
fill: Color.LIGHTGRAY
strokeWidth: 4
stroke: Color.BLACK
effect: DropShadow {
offsetX: 5
offsetY: 5
color: Color.DARKGRAY
radius: 10
}
}, content]
onMousePressed: function (e: MouseEvent): Void {
xOffset = e.sceneX - node.translateX;
yOffset = e.sceneY - node.translateY;
}
onMouseDragged: function (e: MouseEvent): Void {
node.translateX = rasterX(e.sceneX - yOffset);
node.translateY = rasterY(e.sceneY - yOffset);
}
}
}
}