Jump to content

Cannot get drag & drop working


Recommended Posts

Hello everybody,

I'm trying to implement the drag and drop functionality into my project like it is done in this example http://www.babylonjs-playground.com/?18

But it just won't work and I don't know why. I've tried to debug but it seems that the functions like onPointerMove are never called. Can you give me a hint to the right direction?


// The babylon engine
var engine;
// The current scene
var scene;
// The HTML canvas
var canvas;

// The function onload is loaded when the DOM has been loaded
document.addEventListener("DOMContentLoaded", function () {
}, false);

// Resize the babylon engine when the window is resized
window.addEventListener("resize", function () {
    if (engine) {

 * Onload function : creates the babylon engine and the scene
var init = function () {
    // Engine creation
    canvas = document.getElementById("renderCanvas");
    engine = new BABYLON.Engine(canvas, true);

    // Scene creation

    // The render function
    engine.runRenderLoop(function () {


var initScene = function() {
    // scene = new BABYLON.Scene(engine);

    scene = addDragAndDropFunctionality(ground);

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setPosition(new BABYLON.Vector3(20, 200, 400));

    camera.lowerBetaLimit = 0.1;
    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
    camera.lowerRadiusLimit = 150;

    scene.clearColor = new BABYLON.Color3(0, 0, 0);

    var h = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, -1), scene);

    var d1 = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(1, -1, -2), scene);
    d1.position = new BABYLON.Vector3(-300,300,600);

    var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 2, scene, false);
    ground.material = new BABYLON.StandardMaterial("ground", scene);
    ground.material.diffuseColor = BABYLON.Color3.FromInts(193, 181, 151);
    ground.material.specularColor = BABYLON.Color3.Black();


function addDragAndDropFunctionality(ground) {
    var scene = new BABYLON.Scene(engine);

    var canvas = engine.getRenderingCanvas();
    var startingPoint;
    var currentMesh;

    var getGroundPosition = function () {
        // Use a predicate to get position on the ground
        var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; });
        if (pickinfo.hit) {
            return pickinfo.pickedPoint;

        return null;

    var onPointerDown = function (evt) {
        if (evt.button !== 0) {

        // check if we are under a mesh
        var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; });
        if (pickInfo.hit) {
            currentMesh = pickInfo.pickedMesh;
            startingPoint = getGroundPosition(evt);

            if (startingPoint) { // we need to disconnect camera from canvas
                setTimeout(function () {
                }, 0);

    var onPointerUp = function () {
        if (startingPoint) {
            camera.attachControl(canvas, true);
            startingPoint = null;

    var onPointerMove = function (evt) {
        if (!startingPoint) {

        var current = getGroundPosition(evt);

        if (!current) {

        var diff = current.subtract(startingPoint);

        startingPoint = current;


    canvas.addEventListener("pointerdown", onPointerDown, false);
    canvas.addEventListener("pointerup", onPointerUp, false);
    canvas.addEventListener("pointermove", onPointerMove, false);

    scene.onDispose = function () {
        canvas.removeEventListener("pointerdown", onPointerDown);
        canvas.removeEventListener("pointerup", onPointerUp);
        canvas.removeEventListener("pointermove", onPointerMove);

    this.canvas = canvas;

    return scene;


Link to comment
Share on other sites

Welcome to BabylonJS and to the forum. Have you looked at the Javascipt console for any errors there?

You seem to have called your function addDragAndDropFunctionality with the parameter ground before ground is created.

Suggest you try to do the task in the Playground first before you go off and write the full code. Then if this does not work it is much easier to ask for and get help.

Also passing scene as a parameter through different functions can make your code messy. Stick to the playground method of using

var createScene = function() {

// Your BJS code here

    return scene;

to keep code clean.

Read more on why this is a good approach here.

Link to comment
Share on other sites

Hi guys.  Welcome to the forum, @aconite

Here's a quick playground.  I agree with John... using a function to "add drag and drop functionality" is a little strange... but what the heck.


This playground has some minor problems.  It looks like line 83 has problems with the variable scene... surely a scope problem. 

Notice I send many more args... to addDragAndDropFunctionality() call. 

I adjusted the cam, shrunk the ground, did a few other minor little things.  No biggie.  The Get Zip button will work, if anyone wants the "home version".

The dragging is working.  Yay.  I'll let you experts play with this playground, for now... to work on the scoping problem. 

Yet another free playground... by Mister Wingnut.  (oh boy) :)  Hey, new forum users, you know?  I like to welcome them with a sugar-coated handshake.  heh.  

Link to comment
Share on other sites

Cool.  Yeah, maybe not messed up.  Perhaps... a little unexpected, that's all.  I didn't expect to see the drag'n'drop code... put into a function like that.

Sort of an activateDragAndDrop() function.  Actually, I kind of like that idea.  :) But I screwed-up your init() function.  (actually killed it).  Sorry.  :)

Have you studied it, much?  That drag'n'drop is very dependent-upon that getGroundPosition() function... and the ground has to be present.  Want to see something weird?  I knew ya did.  http://playground.babylonjs.com/#GUBMT#2

Try to drag-on mesh areas... that do not have ground behind them.  They won't drag, right?  Wherever you click-to-drag... must have some ground behind it... because the getGroundPosition() NEEDS it.

This can cause trouble when your camera is low and horizon-tal.  http://playground.babylonjs.com/#GUBMT#3

Dragging mesh can be a bit more challenging... with the low-altitude camera.  (Just thought I'd warn you about possible low-altitude camera issues)  :)  Party on!


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...