Dragging Custom Node in JavaFX
- by Karussell
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. Do you have a code snippet, link or other advices for me?
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' 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);
}
}
}
