why browser report error when a shape call the function draggable()?

Question

i want to make the shape draggable when i select the shape and undraggable when unselected why browser report draggable is not a function?

When the instance is initialized it is undraggable

draw(Map, points) {
        var poly = new Konva.Line({
            // points: [10,10,100,0,100,100,0,100],
            points: points,
            stroke: 'blue',
            strokeWidth: 5,
            closed: true,
            // draggable: true,
            name: 'polygon'
        });
        poly.draggable(false)
        Map.stage.findOne("#draw").add(poly)
        Map.stage.findOne("#tr").nodes([poly])

        if(points.length == 2){
            var imageObj = new Image();
            imageObj.onload = function() {
                var yoda = new Konva.Image({
                    x: points[0]-20,
                    y: points[1]-20,
                    image: imageObj,
                    width: 20,
                    height: 20,
                    name:'finishBtn'
                });
            
                // add the shape to the layer
                Map.stage.findOne("#draw").add(yoda);
            };
            imageObj.src = '/src/assets/drawmap/ok.png';
        }

        return poly
    }

when click the shape i want to make the shape draggable ,the node #tr is a transformer,got the selected shapes by the function nodes(),i tried to not use transformer,directly use the stage.getChildren() to get shapes and call draggable() but failed also

Map.stage.on('click tap', function(e) {
            // if we are selecting with rect, do nothing
            if (this.findOne('#selectionRectangle').visible()) {
                return;
            }
            if (Map.curTool !== tool.pick) {
                return;
            }

            // if click on empty area - remove all selections
            // console.warn('单击事件是否在舞台', e.target === this)
            if (e.target === this) {
                this.findOne("#tr").nodes([]);
                return;
            }

            // do nothing if clicked NOT on our rectangles
            if (!e.target.hasName('rect') && !e.target.hasName('polygon') && !e.target.hasName('image')) {
                return;
            }

            // do we pressed shift or ctrl?
            const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
            const isSelected = this.findOne("#tr").nodes().indexOf(e.target) >= 0;

            if (!metaPressed && !isSelected) {
                // if no key pressed and the node is not selected
                // select just one
                this.findOne("#tr").nodes([e.target]);
            } else if (metaPressed && isSelected) {
                // if we pressed keys and node was selected
                // we need to remove it from selection:
                const nodes = this.findOne("#tr").nodes().slice(); // use slice to have new copy of array
                // remove node from array
                nodes.splice(nodes.indexOf(e.target), 1);
                this.findOne("#tr").nodes(nodes);
            } else if (metaPressed && !isSelected) {
                // add the node into selection
                const nodes = this.findOne("#tr").nodes().concat([e.target]);
                this.findOne("#tr").nodes(nodes);
            }
            
            let nodes = Map.stage.findOne("#draw").findOne("#tr").nodes()
            for(var i of nodes){
                console.log(i.draggable,i.getClassName(),i.getName())
                i.draggable(true);
            }

        });

error message but the browser report draggable is not a function

Answer 1

From your console.log I see that i.draggable is true. But it should not be a boolean. It should be a function. Most likely, you overwrite the built-in function with the boolean value. I don't see such code in your sample. You may have it somewhere else.

Don't do this:

node.draggable = true;

Do this:

node.draggable(true);