Drag and drop with a button

Hi everybody!
I am trying to enable movement of the objects with a button. I used the drag and drop example provided. Now, when I click the button it enables the movement of the objects. The playground example I was working: https://playground.babylonjs.com/#279FW9#45

However, I have to do it with multiple imported meshes and when I use the same method on the computer, it doesnt work and gives an error saying scene.pick is not a function. I would appreciate if someone could tell me what I am missing.

Thank you so much!!

1 Like

Guess as it works in a PG are you sure everything has loaded when doing scene.pick?

Suggestion reproduce the relevant part of your code in a playground importing a light-playground- available-mesh (as used in this https://www.babylonjs-playground.com/#17LHMG#1) much easier for helpers to see the problem.

I understood my mistake now when I click the button I am able to move the meshes on the scene; but the problem I want to disable the movement with another click. Do you have any idea how I can do it? I tried to set isPickable property to false but still it catches the mesh.


1 Like

Tidied up your code and added check for isPickable https://playground.babylonjs.com/#279FW9#48

1 Like

Thank you so muchh! It works perfectly like this but when I try this code in my project with imported meshes. I set their isPickable property false; but it still picks and move. I dont know what I am missing.

This works https://playground.babylonjs.com/#279FW9#49

Things to check

  • has imported mesh loaded?
  • is the correct mesh being identified? (rabbit = meshes[0] in above PG is not the mesh in the scene, do not know why meshes[0] with name ‘Rabbit’ is wrong and why meshes[1] name /0 is perhaps someone else might answer)
  • do the variables you are using have the correct scope?

You might also be able to rely on our provided behaviors: Use Mesh Behaviors (eg. dragging) - Babylon.js Documentation


1 Like

Yeah I imported meshes and set isPickable to false and I confirm on inspector that it is set to false but still picks it. I am attaching the piece of code I am working on. I have to import like more than 100 meshes at the same time with their transformation values assigned to them. The example I attached, has only 2 objects to simplify it. It seems simple but I am not able to find a way to disable meshes from moving.

dragdrop.zip (327.9 KB)

Compare line 51 in #47 and line 48 in #48 with your line 190 in your zip

Hey all.
I have a different question with a similar playground.
If my question doesn’t fit in here and I should better open a new topic, just tell me, I’ll delete this post then. Also I don’t want to steal the focus to the OP :slight_smile:

Edit: Didn’t delete the post, but removed the question.
So JohnK doesn’t seem crazy, when he starts talking about new topics suddenly :smiley:

Need to distinguish between boxes https://playground.babylonjs.com/#279FW9#50

You need to think about where you place functions. Is there a good reason to have them in the button?

Alternative https://playground.babylonjs.com/#279FW9#51

On the whole I am in favour of new topics rather than adding to an existing one. Imho more people look at new topics than read through existing ones - increasing chances of answers. Especially if the starting question gets solved and the topic is marked as such.

Thank you really, I understood the point. Just one last question, I have been trying to access all the imported objects by assets manager bcz I need to arrange their isPickable property but I am not able to do that since there are a lot of meshes and not assigned to variable. I tried to add all the items into an array called library with :
loader.onSuccess = function (task) {
for(var n in task.loadedMeshes) {
library.push(task.loadedMeshes[n]); } }

but I couldnt access all meshes on the function. Or should I use task.loadedMeshes[] ? I would appreciate if you give me an idea to access all the objects imported ?

Good question which I am having problems answering because of this issue I mentioned before

Will, when I have time to express it clearly, ask a question on this.

This suggestion seems to over come the meshes[0] or meshes[1] problem


will now look at multiple imports

Here is an idea of multiple importing using ‘assetsManager’ and a ‘loadEntity’ function shown with two different drag behaviors.


The idea for this method of multiple imports is an adaptation of PGs from a post in the old forium

After trying to adapt the drag method from the one I was using and a further question it became clear that Use Mesh Behaviors (eg. dragging) - Babylon.js Documentation was the way to go.

1 Like

Thank you so much for your help. I was just able to work on it these days and it works perfectly now after I implemented what you sent.

1 Like