Сделать элемент перетаскиваемым по диагонали/на пути

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

Answer 2

Я не мог использовать ответ Дерека, потому что вы потеряли другие функции, которые jquery ui draggable обеспечивает как сдерживание.

я нашел, чтобы сделать его перетащите курсор по диагонали, вы можете изменить CSS, используя событие перетаскивания, как это:

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