使用GSAP在拖动时遵循SVG路径的箭头

Question

我正在使用gsap创建一个遵循svg路径的可拖动箭头。

我使用此codepen作为参考：CLICK HERE

我的发展：CLICK HERE

var rail = document.getElementById("rail"),
    knob = document.getElementById("knob"),
    H = rail.getBBox().height,
    railLength = rail.getTotalLength();

Draggable.create(document.createElement('div'), {
    type: 'Y',
    throwProps: true,
    bounds: {
        minY: 0,
        maxY: H
    },
    trigger: knob,
    overshootTolerance: 0,
    onDrag: update,
    onThrowUpdate: update
});

function update() {
    var P = rail.getPointAtLength(this.Y / H * railLength);
    TweenLite.set(knob, {
        attr: {
            cx: P.x,
            cy: P.y
        }
    })
};

我已在代码中将所有X引用更改为Y以使其垂直。 但是不再动了。

如果需要任何信息，请与我们联系。

请帮忙。