Javascript 使元素可沿对角线/路径拖动

在使用jQuery UI之前，我已经使元素可以沿直线路径拖动并固定到轴上，如下所示：

$('#element').draggable({
    axis:'y'
});

然而，我想知道如何使一个元素在遵循一条本质上是可拖动的线的特定路径时可拖动

我基本上有一个样式/位置的元素在开始和另一个样式/位置的结束位置，我希望它是沿着这两个位置之间的路径拖动

---

如何使用javascript或jQuery实现这一点？

我认为jQuery没有提供这种功能。但是，您可以使用纯JavaScript，也可以使用我制作的插件：

$.fn.dragBetween = function(eles) {
    var dragEle = this,
        md = false, offset, a, b, ab;
    eles[0] = $(eles[0])[0];
    eles[1] = $(eles[1])[0];
    dragEle.on("mousedown", function(e) {
        if (e.which == 1) {
            mD = true;
            offset = new Vector(
                e.clientX - this.offsetLeft,
                e.clientY - this.offsetTop
            );
            a = new Vector(eles[0].offsetLeft, eles[0].offsetTop);
            b = new Vector(eles[1].offsetLeft, eles[1].offsetTop);
            ab = b.sub(a);
        }
    });
    $(window).on("mousemove", function(e) {
        if (!mD) return false;

        var cursor = new Vector(e.clientX, e.clientY).sub(offset).sub(a),
            mag = cursor.dot(ab) / ab.dot(ab),
            proj = ab.times(Math.max(0, Math.min(1, mag)));
        var final = proj.add(a);
        dragEle.css({
            top: final._arr[1],
            left: final._arr[0]
        });
        e.preventDefault();
    }).mouseup(function() {
        mD = false;
    });
};

这是我匆忙编写的

Vector

类：

function Vector(x, y) {
    this._arr = [x, y];
}
Vector.prototype.dot = function(v2) {
    var v1 = this;
    return v1._arr[0] * v2._arr[0] + v1._arr[1] * v2._arr[1];
}
Vector.prototype.add = function(v2) {
    var v1 = this;
    return new Vector(v1._arr[0] + v2._arr[0], v1._arr[1] + v2._arr[1]);
}
Vector.prototype.sub = function(v2) {
    var v1 = this;
    return new Vector(v1._arr[0] - v2._arr[0], v1._arr[1] - v2._arr[1]);
}
Vector.prototype.times = function(n) {
    var v = this;
    return new Vector(v._arr[0] * n, v._arr[1] * n);
}

要称之为，只需执行以下操作：

$("#drag").dragBetween(["#a", "#b"]);

演示：

---

有关公式解释，请参见：

我无法使用Derek的答案，因为您失去了jquery ui Dragable提供的其他功能，如包容

我发现要使其沿对角线拖动，可以使用拖动事件修改css，如下所示：

$(".leftTopCircle").draggable({ axis:"x", containment: ".topLeft", scroll: false });
$(".leftTopCircle").on( "drag", function(event, ui){
    $(this).css("top", ui.position.left+"px");
});

---

您可能需要手动检查x，y（我指的是手动编写您自己的代码），而不是使用jQuery UI提供的方法。@Derek朕會功夫 哦，好的。不过，检查移动的每个像素的位置似乎效率低下。有没有一种方法可以告诉它是否在一条线上，然后让它在那条线上拖动。老实说，我认为性能不会有太大的差异，因为jQuery正在做同样的事情来检查您的坐标是否在某个范围内。据我所知，这是唯一能做到的。如果您想找到中间的每个像素，可能会有所帮助。@Derek朕會功夫 好的，谢谢。我想出了一个新主意：不完美，因为如果

x1==x2

或

y1==y2

@yckart-Dang，它就会失败。我原以为我可以摆脱简单的代数，但似乎我必须用向量投影来完成它。@yckart向量数学再一次拯救了这一天：哇，干得好！还有一些快速向量…：）你好，布鲁斯，你能提供html或者小提琴来展示你的代码是如何工作的吗？我也需要这个。谢谢