how to disable the drag and drop event of a part if it is installed in its place?

[Konstantin9658]

Good afternoon I studied all the questions in this repository, but did not find an answer to my question, sorry if I misunderstood?

The task is the following: if a piece is in its rightful place, then it cannot be dragged to another place and its z-index becomes minimal in order to be able to interact with the rest of the puzzle if they are under it? Because at the moment, for example, you can collect the entire puzzle, except for one piece, and this piece will be somewhere under the whole puzzle, and in order to get it, you need to move the entire canvas to find it, which is not very convenient for me.

Still not quite figured out how to understand that the part is in its place or not? How to use the built-in functionality of the library?

For a complete understanding of what I want, there is an example on the code pen https://codepen.io/danzen/pen/rNjQWRY

I hope I made it clear

[flbulgarelli]

👋 Hi @Konstantin9658!

The short answer is that none of that features - stick to a fixed place when piece is valid, predefined pieces places, background images that serve as a hint - are a supported out-of-the box by headbreaker.

However, that doesn't mean you can not implement them on top of it. headbreaker is not a fully functional library, but a framework for implementing jigsaw puzzles. It gives you the basic models of puzzles, pieces, connections and dragging, plus some rendering capabilities through Konva or your own rendering libraries.

For example, headbreaker as no strong notion of per-piece validity, and the validators it provides are implemented on top of user-metadata you can add to your pieces. The current PuzzleValidator - https://github.com/flbulgarelli/headbreaker/blob/master/src/validator.js - checks the relative positions of pieces as a whole, but you could instantiate a PieceValidator that checks for some custom metadata of the piece in order to verify it is in its right (x,y) position.

Also, headbreaker comes with three drag-modes - https://github.com/flbulgarelli/headbreaker/blob/master/src/drag-mode.js -, but you could implement your own that prevents disconnection when the piece is valid, and assign it to a puzzle - youPuzzle.dragMode = new MyCustomDragMode(). That won't prevent movement, but pieces disconnection.

With that in mind you could even prevent movement of properly positioned pieces - currently the fixed attributes only works puzzle-wide:

headbreaker/src/konva-painter.js

Line 49 in d782f67

draggable: !canvas.fixed,

E.g. you could periodically or after a connection event iterate through all the canvas's figures - the visual representation of pieces - and mark them as not draggable. Here is an example of iterating the figures of a canvas: #42 (comment)

Hope that helps!

[goblinsngates]

Hello! How do you set the drag mode? For example, doing autogen.dragMode = X doesn't seem to affect anything. Should it be set elsewhere? Thank you!