Я не могу перетащить элемент на холсте

Question

Я не могу перетащить элемент на холст. Я использовал console.log внутри функции myDown, чтобы получить информацию о щелкающем узле, но он только захватывает информацию с последнего узла в дереве, даже если он не был нажат.

Что происходит ? Как я могу сделать элемент перетаскиваемым в этом случае?

Я новичок в JavaScript, и я пытаюсь реализовать это в проекте, поэтому, пожалуйста, если вы можете мне помочь, большое спасибо .

var maintree;
function initialize() {
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        tree = TREE.create("Front-End"),
        nodes = TREE.getNodeList(tree),
        currNode = tree,
        add_child_button = document.getElementById("add_child"),
        remove_node = document.getElementById("remove_node"),
        zoom_in = document.getElementById("zoom_in"),
        zoom_out = document.getElementById("zoom_out");
        
    var offsetX=canvas.offsetLeft;
    var offsetY=canvas.offsetTop;

    // drag related variables
    var dragok = false;
    var startX;
    var startY;

    canvas.addEventListener("click", function (event) {
        var x = event.pageX - canvas.offsetLeft,
            y = event.pageY - canvas.offsetTop;
        for (var i = 0; i < nodes.length; i++) {
            if (x > nodes[i].xPos && y > nodes[i].yPos && x < nodes[i].xPos + nodes[i].width && y < nodes[i].yPos + nodes[i].height) {
                currNode.selected(false);
                nodes[i].selected(true);
                currNode = nodes[i];
                TREE.clear(context);
                TREE.draw(context, tree);
                updatePage(currNode);
                break;
            }
        }

        // listen for mouse events
        canvas.onmousedown = myDown;
        canvas.onmouseup = myUp;

    }, false);


    canvas.addEventListener("mousemove", function (event) {
        var x = event.pageX - canvas.offsetLeft,
            y = event.pageY - canvas.offsetTop;
        for (var i = 0; i < nodes.length; i++) {
            if (x > nodes[i].xPos && y > nodes[i].yPos && x < nodes[i].xPos + nodes[i].width && y < nodes[i].yPos + nodes[i].height) {
                canvas.style.cursor = "pointer";
                break;
            }
            else {
                canvas.style.cursor = "auto";
            }
        }

        canvas.onmousemove = myMove;

    }, false);




// handle mousedown events
function myDown(e){

    // tell the browser we're handling this mouse event
    e.preventDefault();
    e.stopPropagation();

    // get the current mouse position
    var mx = parseInt(e.clientX-offsetX);
    var my = parseInt(e.clientY-offsetY);

    // test each rect to see if mouse is inside
    dragok=false;
    for(var i=0; i < nodes.length; i++){
        node = nodes[i];
        if(mx > node.x && mx < node.x + node.width && my > node.y && my < node.y + node.height){
            // if yes, set that nodes isDragging=true            
            dragok = true;
            node.isDragging = true;
        }
    }
    // save the current mouse position
    startX=mx;
    startY=my;
    console.log(node);
}

    // handle mouseup events
    function myUp(e){
        // tell the browser we're handling this mouse event
        e.preventDefault();
        e.stopPropagation();

        // clear all the dragging flags
        dragok = false;
        for(var i = 0; i < nodes.length; i++){
            nodes[i].isDragging = false;
        }
    }


// handle mouse moves
function myMove(e){
    // if we're dragging anything...
    if (dragok){

      // tell the browser we're handling this mouse event
      e.preventDefault();
      e.stopPropagation();

      // get the current mouse position
      var mx=parseInt(e.clientX-offsetX);
      var my=parseInt(e.clientY-offsetY);

      // calculate the distance the mouse has moved
      // since the last mousemove
      var dx=mx-startX;
      var dy=my-startY;

      // move each rect that isDragging 
      // by the distance the mouse has moved
      // since the last mousemove
      for(var i = 0; i < nodes.length; i++){
          node = nodes[i];
          if(node.isDragging){
              node.x+=dx;
              node.y+=dy;
          }
      }

      // reset the starting mouse position for the next mousemove
      startX=mx;
      startY=my;

    }
}


//Control
    add_child_button.addEventListener('click', function (event) {
        currNode.addChild(TREE.create("Child of " + currNode.text));
        TREE.clear(context);
        nodes = TREE.getNodeList(tree);
        TREE.draw(context, tree);
    }, false);

    remove_node.addEventListener('click', function (event) {
        TREE.destroy(currNode);
        TREE.clear(context);
        nodes = TREE.getNodeList(tree);
        TREE.draw(context, tree);
    }, false);

    zoom_in.addEventListener('click', function (event) {
        for (var i = 0; i < nodes.length; i++){
            nodes[i].width *= 1.05;
            nodes[i].height *= 1.05;
        }
        TREE.config.width *= 1.05;
        TREE.config.height *= 1.05;
        TREE.clear(context);
        TREE.draw(context, tree);
    }, false);

    zoom_out.addEventListener('click', function (event) {
        for (var i = 0; i < nodes.length; i++){
            nodes[i].width = nodes[i].width * 0.95;
            nodes[i].height = nodes[i].height * 0.95;
        }
        TREE.config.width *= 0.95;
        TREE.config.height *= 0.95;
        TREE.clear(context);
        TREE.draw(context, tree);
    }, false);
    context.canvas.width = document.getElementById("main").offsetWidth;
    context.canvas.height = document.getElementById("main").offsetHeight;
    populateDummyData(tree);
    nodes = TREE.getNodeList(tree);
    TREE.draw(context, tree);
    maintree = tree;
}
//end control


function updatePage(tree) {
    var info_panel = document.getElementById("information_panel");
    var header = document.getElementById("header");
    header.innerHTML = "Front-End Tree";
    var info_panel_html = "<ul>";
    info_panel_html += "<li>Name: " +tree.text +"</li>";
    info_panel_html += "</ul>";
    info_panel.innerHTML = info_panel_html;
}

function populateDummyData(tree) {
    tree.selected(true);
    updatePage(tree);
    tree.addChild(TREE.create("HTML")); //0
    tree.addChild(TREE.create("CSS")); //1
    tree.addChild(TREE.create("JavaScript")); //2

    //HTML
    tree.getChildAt(0).addChild(TREE.create("Tag")); //3
    tree.getChildAt(0).addChild(TREE.create("Attribute")); //4
    
    //CSS
    tree.getChildAt(1).addChild(TREE.create("Framework")); //5
    tree.getChildAt(1).addChild(TREE.create("Preprocessors")); //6

    //JavaScript
    tree.getChildAt(2).addChild(TREE.create("Library")); //7
    tree.getChildAt(2).addChild(TREE.create("Framework")); //8
    
    tree.getDescendent(7).addChild(TREE.create("Bootstrap")); //9
    tree.getDescendent(8).addChild(TREE.create("SASS")); //10
    tree.getDescendent(8).addChild(TREE.create("LESS")); //11
    tree.getDescendent(9).addChild(TREE.create("jQuery")); //12
    tree.getDescendent(9).addChild(TREE.create("Backbone")); //13
    tree.getDescendent(9).addChild(TREE.create("React")); //14
    tree.getDescendent(10).addChild(TREE.create("Angular")); //15
    tree.getDescendent(10).addChild(TREE.create("Vue")); //16
}