使对角线/路径上的元素可拖动

Question

在使用jQuery UI之前,我已将元素在直线路径上拖动并固定到轴上,如下所示:

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

但是,我想知道如何使一个元素可拖动,同时遵循一条基本上是可拖动线的特定路径.

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

我怎么能用javascript或jQuery做到这一点？

Answer 1

我不认为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"]);

演示:http://jsfiddle.net/DerekL/0j6e60d8/
有关公式说明,请参阅:https://www.desmos.com/calculator/tpegbbk8gt